/* Hardboiled CSS3 Media Queries by Andy Clarke: http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/ Author: Andy Clarke Web site: http://stuffandnonsense.co.uk Twitter: http://twitter.com/malarkey Hardboiled Web Design Web site: http://hardboiledwebdesign.com Twitter: http://twitter.com/itshardboiled Version date : 30th September 2010 Version: 0.9 License: Creative Commons CC Zero Declaration. No Rights Reserved. */ /* DEVICES: --------- HTC ONE X 1180 x 720 (portrait) Emulator: 456 x 320 (portrait) */ /* low density pixel ratio devices ----------- */ @media only screen and (max-width: 768px) { /*#productLogo, #loginLogo {background: blue;}*/ #moveIcon { display: block; } #leftSide { left: -250px; } .menuText { display: none; } .ui.responsive.sidebar { width: 275px !important; margin-left: -275px !important; } } /* low density pixel ratio devices ----------- */ @media only screen and (max-width: 500px) { /*#productLogo, #loginLogo {background: blue;}*/ #moveIcon { display: block; } #leftSide { left: -250px; } .menuText { display: none; } .ui.responsive.sidebar { width: 200px !important; margin-left: -200px !important; } } /* low density pixel ratio devices ----------- */ @media only screen and (min-width: 768px) { /*#productLogo, #loginLogo {background: red;}*/ #moveIcon { /*display: block;*/ } #leftSide { left: 0; } .menuText { display: inline; } .ui.responsive.sidebar { width: 350px !important; margin-left: -350px !important; } } /* low density pixel ratio devices ----------- */ @media only screen and (-webkit-min-device-pixel-ratio: 0.75), only screen and ( min--moz-device-pixel-ratio: 0.75), only screen and ( min-moz-device-pixel-ratio: 0.75), only screen and ( -o-min-device-pixel-ratio: 3/4), only screen and ( min-device-pixel-ratio: 0.75), only screen and ( min-resolution: 0.75dppx) { /*#productLogo, #loginLogo {background: blue;}*/ } /* Medium density pixel ratio devices ------------------------------------------ Browsers / devices Firefox Chrome */ @media only screen and (-webkit-min-device-pixel-ratio: 1.0), only screen and ( min--moz-device-pixel-ratio: 1.0), only screen and ( min-moz-device-pixel-ratio: 1.0), only screen and ( -o-min-device-pixel-ratio: 1/1), only screen and ( min-device-pixel-ratio: 1.0), only screen and ( min-resolution: 1dppx) { /*#productLogo, #loginLogo {background: green;}*/ } /* iPhone 4 and high pixel ratio devices ------------------------------------------ Browsers / devices android 4.1 SDK LG dualcore Albert */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and ( min--moz-device-pixel-ratio: 1.5), only screen and ( min-moz-device-pixel-ratio: 1.5), only screen and ( -o-min-device-pixel-ratio: 3/2), only screen and ( min-device-pixel-ratio: 1.5), only screen and ( min-resolution: 1.5dppx) { /*#productLogo, #loginLogo {background: purple;}*/ /*#moveIcon {*/ /*display: block;*/ /*}*/ /*#leftSide {*/ /*left: -250px;*/ /*}*/ } /* Very high pixel ratio devices ------------------------------------------ Browsers /devices HTC one X (1180x720) */ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( min-moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { /*#productLogo, #loginLogo {background: orange;}*/ /*html, body {*/ /*width: 720px;*/ /*min-width: 720px;*/ /*height: 1180px;*/ /*min-height: 1180px;*/ /*}*/ /*#map {*/ /*width: 150px;*/ /*}*/ /*#leftSide {*/ /*width: 600px;*/ /*}*/ } /*@viewport {*/ /*width: 400px auto;*/ /*}*/ /* Screen resolutions and view-ports --------------------------- LANDSCAPE DEVICE DOC WIN BROWSER VIEWPORT SETTING -------------------------------------------------------------------------------- ipad 644 980 644 980 default NONE htc one x 1533 980 1533 980 default NONE htc one x 1543 980 1543 980 chrome NONE htc one 1533 980 1533 980 default NONE htc one 1543 980 1543 980 chrome NONE ipad 672 1024 672 1024 default initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no htc one x 563 562 563 360 default initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no htc one x 567 562 567 360 chrome initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no htc one 563 562 563 360 default initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no htc one 567 562 567 360 chrome initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no ipad 1024 1024 1024 1024 default initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width, height=device-height htc one x 563 562 563 360 default initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width, height=device-height htc one x 567 562 567 360 chrome initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width, height=device-height htc one 563 562 563 360 default initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width, height=device-height htc one 567 562 567 360 chrome initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width, height=device-height VIEWPORT 0.5! ipad 1344 2048 1344 2048 default initial-scale=0.5, maximum-scale=1.0, minimum-scale=0.5, user-scalable=no, width=device-width, height=device-height htc one x 563 562 563 360 default initial-scale=0.5, maximum-scale=1.0, minimum-scale=0.5, user-scalable=no, width=device-width, height=device-height htc one 1134 720 1134 720 chrome initial-scale=0.5, maximum-scale=1.0, minimum-scale=0.5, user-scalable=no, width=device-width, height=device-height VIEWPORT 0.5! ipad 1344 2048 1344 2048 default initial-scale=0.5, maximum-scale=1.0, minimum-scale=0.5, user-scalable=no htc one x 563 562 563 360 default initial-scale=0.5, maximum-scale=1.0, minimum-scale=0.5, user-scalable=no htc one 1134 720 1134 720 chrome initial-scale=0.5, maximum-scale=1.0, minimum-scale=0.5, user-scalable=no ipad 672 1024 672 1024 default initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width htc one x 563 562 563 360 default initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width htc one 567 562 567 360 chrome initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width ipad 672 1024 672 1024 default initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width, target-densitydpi=device-dpi htc one x 1126 720 1126 720 default initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width, target-densitydpi=device-dpi htc one 567 562 567 360 chrome initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width, target-densitydpi=device-dpi */