Skip to content

Instantly share code, notes, and snippets.

@SelenIT
Last active August 29, 2015 14:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save SelenIT/b9fc608bffb18399ed95 to your computer and use it in GitHub Desktop.
Save SelenIT/b9fc608bffb18399ed95 to your computer and use it in GitHub Desktop.
Media query to detect full screen mode — standards way (kind of)
/**
* Media query to detect full screen mode — standards way (kind of)
*/
@media screen and (-webkit-view-mode:windowed) {
body {
font-size: 12px;
border: 10px solid green;
}
}
@media screen and (-webkit-view-mode:minimized) {
body {
font-size: 1px;
border: 1px solid green;
}
}
@media screen and (-webkit-view-mode:maximized) {
body {
font-size: 16px;
border: 20px solid green;
}
}
@media screen and (-webkit-view-mode:fullscreen) {
body {
font-size: 20px;
border: 20px solid red;
}
}
body {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
<h1>Пример странички</h1>
<p>Попробуйте свернуть ее, развернуть в окно, развернуть на весь экран, перевести в полноэкранный режим (F11) и обратно. Если <code>view-mode</code> у вас работает, вы должны увидеть изменение размера шрифта и толщины рамки, а если повезет — то и ее цвета :)</p>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment