diff options
| author | Artur Kwiatkowski <[email protected]> | 2013-04-22 15:21:55 +0200 |
|---|---|---|
| committer | Artur Kwiatkowski <[email protected]> | 2013-04-22 15:21:55 +0200 |
| commit | b7dcefea83d6aa92c6f78d5fb84fa9a032bc3c7f (patch) | |
| tree | c4787c817b0d8555ab02be5b5d08cb51b6505576 /less/responsive-utilities.less | |
| parent | 3861e3f5d5c0a579b1a77dc0f45131dd2499ff8b (diff) | |
| parent | e0d60b1325591a347d9e49e44be6d77401b07749 (diff) | |
| download | bootstrap-b7dcefea83d6aa92c6f78d5fb84fa9a032bc3c7f.tar.xz bootstrap-b7dcefea83d6aa92c6f78d5fb84fa9a032bc3c7f.zip | |
Merge branch '3.0.0-wip' of https://github.com/twitter/bootstrap into 3.0.0-wip
Diffstat (limited to 'less/responsive-utilities.less')
| -rw-r--r-- | less/responsive-utilities.less | 60 |
1 files changed, 39 insertions, 21 deletions
diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less index bf43e8ef7..4275264d9 100644 --- a/less/responsive-utilities.less +++ b/less/responsive-utilities.less @@ -5,11 +5,27 @@ // IE10 Metro responsive // Required for Windows 8 Metro split-screen snapping with IE10 +// // Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/ @-ms-viewport{ width: device-width; } +// IE10 on Windows Phone 8 +// IE10 on WP8 doesn't report CSS pixels, but actual device pixels. In +// other words, say on a Lumia, you'll get 768px as the device width, +// meaning users will see the tablet styles and not phone styles. +// +// Alternatively you can override this with JS (see source below), but +// we won't be doing that here given our limited scope. +// +// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ +@media screen and (max-width: 400px) { + @-ms-viewport{ + width: 320px; + } +} + // Hide from screenreaders and browsers // Credit: HTML5 Boilerplate .hidden { @@ -19,34 +35,36 @@ // Visibility utilities -// For desktops -.visible-phone { display: none !important; } +// For Phones +.visible-phone { display: inherit !important; } .visible-tablet { display: none !important; } -.hidden-phone { } -.hidden-tablet { } -.hidden-desktop { display: none !important; } -.visible-desktop { display: inherit !important; } +.visible-desktop { display: none !important; } + +.hidden-phone { display: none !important; } +.hidden-tablet { display: inherit !important; } +.hidden-desktop { display: inherit !important; } + // Tablets & small desktops only @media (min-width: 768px) and (max-width: 979px) { - // Hide everything else - .hidden-desktop { display: inherit !important; } - .visible-desktop { display: none !important ; } - // Show + .visible-phone { display: none !important; } .visible-tablet { display: inherit !important; } - // Hide + .visible-desktop { display: none !important; } + + .hidden-phone { display: inherit !important; } .hidden-tablet { display: none !important; } + .hidden-desktop { display: inherit !important; } } -// Phones only -@media (max-width: 767px) { - // Hide everything else - .hidden-desktop { display: inherit !important; } - .visible-desktop { display: none !important; } - // Show - .visible-phone { display: inherit !important; } // Use inherit to restore previous behavior - // Hide - .hidden-phone { display: none !important; } +// For desktops +@media (min-width: 980px) { + .visible-phone { display: none !important; } + .visible-tablet { display: none !important; } + .visible-desktop { display: inherit !important; } + + .hidden-phone { display: inherit !important; } + .hidden-tablet { display: inherit !important; } + .hidden-desktop { display: none !important; } } // Print utilities @@ -56,4 +74,4 @@ @media print { .visible-print { display: inherit !important; } .hidden-print { display: none !important; } -} +}
\ No newline at end of file |