Skip to content

Instantly share code, notes, and snippets.

@jolantis
Created June 28, 2010 10:49
Show Gist options
  • Save jolantis/455690 to your computer and use it in GitHub Desktop.
Save jolantis/455690 to your computer and use it in GitHub Desktop.
targeting iPhone and/or iPad
<link rel="stylesheet" media="all and (orientation: portrait)" href="/portrait.css">
<link rel="stylesheet" media="all and (orientation: landscape)” href="/landscape.css">
[option 1 - tested and working]
<link rel="stylesheet" media="only screen and (device-width: 768px) and (orientation: portrait)" href="/ipad-portrait.css">
<link rel="stylesheet" media="only screen and (device-width: 768px) and (orientation: landscape)" href="/ipad-landscape.css">
[option 2]
<link rel="stylesheet" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait)" href="/ipad-portrait.css">
<link rel="stylesheet" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape)" href="/ipad-landscape.css">
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="/iphone-retina.css" />
[In the Retina-specific CSS, load in 32x32 icons as background images and specifies their dimensions in CSS pixels as 16x16 using the background-size CSS property.]
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="/iphone.css">
<link rel="stylesheet" media="only screen and (orientation: portrait)" href="/portrait.css">
<link rel="stylesheet" media="only screen and (orientation: landscape)” href="/landscape.css">
[glossy]
<link rel="apple-touch-icon" media="screen and (resolution: 163dpi)" href="/iOS-57.png" />
<link rel="apple-touch-icon" media="screen and (resolution: 132dpi)" href="/iOS-72.png" />
<link rel="apple-touch-icon" media="screen and (resolution: 326dpi)" href="/iOS-114.png" />
[matt]
<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 163dpi)" href="/iOS-57.png" />
<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 132dpi)" href="/iOS-72.png" />
<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 326dpi)" href="/iOS-114.png" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment