<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
<title>Document</title>
</head>
<script type="module">
import { html, render } from 'https://unpkg.com/lit-html?module';
const userAgentTemplate = (userAgent) => html`<div>${userAgent}</div>`
const heightWidthTemplate = (width, height) => html`<div>
width:${width}
<br/>
height:${height}
</div>`
window.addEventListener('orientationchange', (e) => {
renderApp()
}, false)
const isIpadOrIphone = () => {
return navigator.userAgent.toLowerCase().indexOf("iphone") > -1 ||
navigator.userAgent.toLowerCase().indexOf("ipad") > -1 ||
((navigator.userAgent.indexOf("Mac OS X") > -1) && (window.screen.height > window.screen.width));
}
const renderApp = () => {
render(
html`
${userAgentTemplate(navigator.userAgent)}
${heightWidthTemplate(window.screen.width, window.screen.height)}
orientation:${window.orientation}
<br/>
is iPad or iPhone?: ${isIpadOrIphone()}
`
, document.body)
}
renderApp();
</script>
<body>
</body>
</html>