Android and Iphone - modern css media queries


/ Published in: CSS
Save to your folder(s)

Extended css media queries for modern mobile screens


Copy this code and paste it in your HTML
  1. /* Desktops and laptops ----------- */
  2. @media only screen
  3. and (min-width : 1224px) {
  4. /* Styles */
  5. }
  6.  
  7. /* Large screens ----------- */
  8. @media only screen
  9. and (min-width : 1824px) {
  10. /* Styles */
  11. }
  12.  
  13. /* old Smartphones (portrait and landscape) ----------- */
  14. @media only screen
  15. and (min-device-width : 320px)
  16. and (max-device-width : 480px) {
  17. /* Styles */
  18. }
  19.  
  20. /* old Smartphones (landscape) ----------- */
  21. @media only screen
  22. and (min-width : 321px) {
  23. /* Styles */
  24. }
  25.  
  26. /* old Smartphones (portrait) ----------- */
  27. @media only screen
  28. and (max-width : 320px) {
  29. /* Styles */
  30. }
  31.  
  32. /* iPhone 4 ----------- */
  33. @media
  34. only screen and (-webkit-min-device-pixel-ratio : 1.5),
  35. only screen and (min-device-pixel-ratio : 1.5) {
  36. /* Styles */
  37. }
  38.  
  39. /* iPads (portrait and landscape) ----------- */
  40. @media only screen
  41. and (min-device-width : 768px)
  42. and (max-device-width : 1024px) {
  43. /* Styles */
  44. }
  45.  
  46. /* iPads (landscape) ----------- */
  47. @media only screen
  48. and (min-device-width : 768px)
  49. and (max-device-width : 1024px)
  50. and (orientation : landscape) {
  51. /* Styles */
  52. }
  53.  
  54. /* iPads (portrait) ----------- */
  55. @media only screen
  56. and (min-device-width : 768px)
  57. and (max-device-width : 1024px)
  58. and (orientation : portrait) {
  59. /* Styles */
  60. }
  61.  
  62. /* Android Tablet (portrait and landscape) ----------- */
  63. @media only screen
  64. and (min-device-width : 800px)
  65. and (max-device-width : 1280px) {
  66. /* Styles */
  67. }
  68.  
  69. /* Android Tablet (landscape) ----------- */
  70. @media only screen
  71. and (min-device-width : 800px)
  72. and (max-device-width : 1280px)
  73. and (orientation : landscape) {
  74. /* Styles */
  75. }
  76.  
  77. /* Android Tablet (portrait) ----------- */
  78. @media only screen
  79. and (min-device-width : 800px)
  80. and (max-device-width : 1280px)
  81. and (orientation : portrait) {
  82. /* Styles */
  83. }
  84.  
  85. /* Desire + Galaxy S2 (portrait and landscape) ----------- */
  86. @media only screen
  87. and (min-device-width : 480px)
  88. and (max-device-width : 800px) {
  89. /* Styles */
  90. }
  91.  
  92. /* Desire + Galaxy S2 (landscape) ----------- */
  93. @media only screen
  94. and (min-device-width : 480px)
  95. and (max-device-width : 800px)
  96. and (orientation : landscape) {
  97. /* Styles */
  98. }
  99.  
  100. /* Desire + Galaxy S2 (portrait) ----------- */
  101. @media only screen
  102. and (min-device-width : 480px)
  103. and (max-device-width : 800px)
  104. and (orientation : portrait) {
  105. /* Styles */
  106. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.