57 lines
2.3 KiB
HTML
57 lines
2.3 KiB
HTML
<!doctype html>
|
|
<html>
|
|
|
|
<head>
|
|
<!-- Polyfills only needed for Firefox and Edge. -->
|
|
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>
|
|
<!-- Works only on browsers that support Javascript modules like
|
|
Chrome, Safari, Firefox 60, Edge 17 -->
|
|
|
|
<style>
|
|
body {
|
|
background-color: black;
|
|
font-size: 1vw;
|
|
}
|
|
|
|
@media (max-aspect-ratio: 3/2) {
|
|
body {
|
|
font-size: 1vh;
|
|
}
|
|
}
|
|
</style>
|
|
// Original viewport definition, note the "id" that I use to modify the viewport later on:
|
|
<meta name="viewport" id="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
|
|
|
|
<script>
|
|
// Global boolean variable that holds the current orientation
|
|
var pageInPortraintMode;
|
|
|
|
// Listen for window resizes to detect orientation changes
|
|
window.addEventListener("resize", windowSizeChanged);
|
|
|
|
// Set the global orientation variable as soon as the page loads
|
|
addEventListener("load", function() {
|
|
pageInPortraintMode = window.innerHeight > window.innerWidth;
|
|
document.getElementById("viewport").setAttribute("content", "width=" + window.innerWidth + ", height=" + window.innerHeight + ", initial-scale=1.0, maximum-scale=1.0, user-scalable=0");
|
|
})
|
|
|
|
// Adjust viewport values only if orientation has changed (not on every window resize)
|
|
function windowSizeChanged() {
|
|
if (((pageInPortraintMode === true) && (window.innerHeight < window.innerWidth)) || ((pageInPortraintMode === false) && (window.innerHeight > window.innerWidth))) {
|
|
pageInPortraintMode = window.innerHeight > window.innerWidth;
|
|
document.getElementById("viewport").setAttribute("content", "width=" + window.innerWidth + ", height=" + window.innerHeight + ", initial-scale=1.0, maximum-scale=1.0, user-scalable=0");
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<info-box id="infobox"></info-box>
|
|
<server-connection id="server-connection" grid_id="grid" url="wss://the-cake-is-a-lie.net:8765"></server-connection>
|
|
<crossword-grid id="grid" infobox_id="infobox" width="10" height="10"></crossword-grid>
|
|
<script type="module" src="./main.js"></script>
|
|
|
|
</body>
|
|
|
|
</html> |