62 lines
		
	
	
		
			2.4 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			62 lines
		
	
	
		
			2.4 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
| <!doctype html>
 | |
| <html>
 | |
| 
 | |
| <head>
 | |
|   <link rel="icon" type="image/png" href="./favicon.png" />
 | |
|   <link rel="manifest" href="./manifest.json">
 | |
|   <script type="module" src="./app.js"></script>
 | |
|   <script type="module" src="./sw.js"></script>
 | |
|   <!-- 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: 1.5vh;
 | |
|     }
 | |
| 
 | |
|     @media (max-aspect-ratio: 3/2) {
 | |
|       body {
 | |
|         font-size: 1.5vh;
 | |
|       }
 | |
|     }
 | |
|   </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" lang="de" grid_id="grid" url="ws://localhost: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> |