| <!DOCTYPE html> |
| <meta name="viewport" content="width=device-width initial-scale=1.0" /> |
| <script src="shared.js"></script> |
| <style> |
| #target { |
| margin-top: env(safe-area-inset-top); |
| margin-left: env(safe-area-inset-left); |
| margin-bottom: env(safe-area-inset-bottom); |
| margin-right: env(safe-area-inset-right); |
| } |
| |
| iframe { |
| width: 500px; |
| height: 500px; |
| } |
| </style> |
| <div id=target></div> |
| <button id=fullscreen>go fullscreen</button> |
| <button id=subframefull>fullscreen subframe</button> |
| <iframe src=subframe.html id=frame allow=fullscreen></iframe> |
| <script> |
| const frameWindow = document.getElementById('frame').contentWindow; |
| |
| document.querySelector('#fullscreen').addEventListener('click', () => { |
| document.body.webkitRequestFullscreen(); |
| }, { once: true }); |
| |
| document.querySelector('#subframefull').addEventListener('click', () => { |
| frameWindow.document.body.webkitRequestFullscreen(); |
| }, { once: true }); |
| |
| const viewportTag = document.getElementsByTagName('meta')[0]; |
| const defaultViewportContent = viewportTag.getAttribute('content'); |
| |
| function setViewportFit(value) { |
| viewportTag.setAttribute('content', defaultViewportContent + ', viewport-fit=' + value); |
| } |
| </script> |
