Posted By

chrisaiv on 07/06/11


Tagged

css


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

csanchezh


CSS: iPhone Custom CSS


 / Published in: CSS
 

  1. <style type="text/css" media="screen">
  2.  
  3. /* iPhone 4
  4. @media only screen and (-webkit-min-device-pixel-ratio:2){
  5. #innerWrap{ width: 650px; }
  6. #container{ width: inherit; }
  7. }
  8.  
  9. @media all and (max-device-width: 480px){
  10. #innerWrap{ width: 650px; }
  11. #container{ width: inherit; }
  12. }
  13. @media screen and (orientation:portrait) and (min-device-width: 768px) and (max-device-width: 1024px){
  14. #innerWrap{ width: 1024px; border: 0px solid yellow; }
  15. #container{ width: 650px; border: 0px solid violet; }
  16. }
  17. @media screen and (orientation:landscape) and (min-device-width: 768px) and (max-device-width: 1024px){
  18. #innerWrap{ width: 1024px; border: 0px solid yellow; }
  19. #container{ width: 650px; border: 0px solid violet; }
  20. }
  21. */
  22.  
  23. </style>
  24. <!-- Portrait -->
  25. <link media="only screen and (max-width: 320px)" rel="stylesheet" type="text/css" href="http://kuscinteractive.org/css/nowplaying/iphone_portrait.css"/>
  26. <link rel="stylesheet" media="all and (orientation:portrait)" type="text/css" href="http://kuscinteractive.org/css/nowplaying/portrait.css">
  27.  
  28. <!-- Landscape -->
  29. <link media="only screen and (min-width: 321px)" rel="stylesheet" type="text/css" href="http://kuscinteractive.org/css/nowplaying/iphone_landscape.css"/>
  30. <link media="all and (orientation:landscape)" rel="stylesheet" type="text/css" href="http://kuscinteractive.org/css/nowplaying/landscape.css">
  31.  
  32. <!-- iPhone Retina Display -->
  33. <link media="only screen and (-webkit-min-device-pixel-ratio: 2)" rel="stylesheet" type="text/css" href="http://kuscinteractive.org/css/nowplaying/retina.css" />

Report this snippet  

You need to login to post a comment.