media_queries_iframe2.html (1091B)
1 <!DOCTYPE html> 2 <html lang="en-US"> 3 <head> 4 <title>Media Queries Test inner frame</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 6 <meta http-equiv="Content-Style-Type" content="text/css"> 7 <style> 8 html, body { 9 width: 100%; 10 height: 100%; 11 margin: 0; 12 } 13 </style> 14 <style type="text/css" id="style" media="all and (display-mode: browser)"> 15 body { background: yellow; } 16 </style> 17 <style type="text/css" id="style" media="all and (display-mode: standalone)"> 18 body { background: green; } 19 </style> 20 <style type="text/css" id="style" media="all and (display-mode: minimal-ui)"> 21 body { background: red; } 22 </style> 23 <style type="text/css" id="style" media="all and (display-mode: fullscreen)"> 24 body { background: blue; } 25 </style> 26 </head> 27 <body> 28 <script> 29 window.addEventListener("message", e => { 30 if (e.data == "get-background-color") { 31 let { backgroundColor } = document.defaultView.getComputedStyle(document.body); 32 e.source.postMessage({ backgroundColor }, e.origin); 33 } 34 }); 35 </script> 36 </body> 37 </html>