Skip to content

Instantly share code, notes, and snippets.

@mhairston

mhairston/device-orientation.css

Created November 15, 2011 17:21
Show Gist options
  • Save mhairston/1367673 to your computer and use it in GitHub Desktop.
Save mhairston/1367673 to your computer and use it in GitHub Desktop.
Download ZIP
Device Orientation Detection in CSS
Raw
device-orientation.css
/* Device-specific styles:
If it’s important to deliver a very specific design to a very specific device (ie: a web application built specifically for the iPad), you can use Media queries to deliver styles to exact resolutions:
*/
<!-- iPad specific styles -->
<link rel="stylesheet" href="iPad.css" type="text/css" media="only screen and (max-device-width:1024px) and (min-device-width:768px)" />
Orientation-specific styles:
<!-- Orientation styles for devices w/ max width of 1024px -->
<link rel="stylesheet" href="portrait.css" type="text/css" media="only screen and (max-device-width:1024px) and (orientation:portrait)" />
<link rel="stylesheet" href="landscape.css" type="text/css" media="only screen and (max-device-width:1024px) and (orientation:landscape)" />
/* from: http://www.uxbooth.com/blog/considerations-for-mobile-design-part-2-dimensions/ */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment