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: 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> |