CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices （包括 苹果手表 apple watch）

时间：2023-12-10 11:13:02
  1. /* ----------- iPhone 4 and 4S ----------- */
  2. /* Portrait and Landscape */
  3. @media only screen
  4. and (min-device-width: 320px)
  5. and (max-device-width: 480px)
  6. and (-webkit-min-device-pixel-ratio: 2) {
  7. }
  8. /* Portrait */
  9. @media only screen
  10. and (min-device-width: 320px)
  11. and (max-device-width: 480px)
  12. and (-webkit-min-device-pixel-ratio: 2)
  13. and (orientation: portrait) {
  14. }
  15. /* Landscape */
  16. @media only screen
  17. and (min-device-width: 320px)
  18. and (max-device-width: 480px)
  19. and (-webkit-min-device-pixel-ratio: 2)
  20. and (orientation: landscape) {
  21. }
  22. /* ----------- iPhone 5 and 5S ----------- */
  23. /* Portrait and Landscape */
  24. @media only screen
  25. and (min-device-width: 320px)
  26. and (max-device-width: 568px)
  27. and (-webkit-min-device-pixel-ratio: 2) {
  28. }
  29. /* Portrait */
  30. @media only screen
  31. and (min-device-width: 320px)
  32. and (max-device-width: 568px)
  33. and (-webkit-min-device-pixel-ratio: 2)
  34. and (orientation: portrait) {
  35. }
  36. /* Landscape */
  37. @media only screen
  38. and (min-device-width: 320px)
  39. and (max-device-width: 568px)
  40. and (-webkit-min-device-pixel-ratio: 2)
  41. and (orientation: landscape) {
  42. }
  43. /* ----------- iPhone 6 ----------- */
  44. /* Portrait and Landscape */
  45. @media only screen
  46. and (min-device-width: 375px)
  47. and (max-device-width: 667px)
  48. and (-webkit-min-device-pixel-ratio: 2) {
  49. }
  50. /* Portrait */
  51. @media only screen
  52. and (min-device-width: 375px)
  53. and (max-device-width: 667px)
  54. and (-webkit-min-device-pixel-ratio: 2)
  55. and (orientation: portrait) {
  56. }
  57. /* Landscape */
  58. @media only screen
  59. and (min-device-width: 375px)
  60. and (max-device-width: 667px)
  61. and (-webkit-min-device-pixel-ratio: 2)
  62. and (orientation: landscape) {
  63. }
  64. /* ----------- iPhone 6+ ----------- */
  65. /* Portrait and Landscape */
  66. @media only screen
  67. and (min-device-width: 414px)
  68. and (max-device-width: 736px)
  69. and (-webkit-min-device-pixel-ratio: 3) {
  70. }
  71. /* Portrait */
  72. @media only screen
  73. and (min-device-width: 414px)
  74. and (max-device-width: 736px)
  75. and (-webkit-min-device-pixel-ratio: 3)
  76. and (orientation: portrait) {
  77. }
  78. /* Landscape */
  79. @media only screen
  80. and (min-device-width: 414px)
  81. and (max-device-width: 736px)
  82. and (-webkit-min-device-pixel-ratio: 3)
  83. and (orientation: landscape) {
  84. }

b) Galaxy Phones

  1. /* ----------- Galaxy S3 ----------- */
  2. /* Portrait and Landscape */
  3. @media screen
  4. and (device-width: 320px)
  5. and (device-height: 640px)
  6. and (-webkit-device-pixel-ratio: 2) {
  7. }
  8. /* Portrait */
  9. @media screen
  10. and (device-width: 320px)
  11. and (device-height: 640px)
  12. and (-webkit-device-pixel-ratio: 2)
  13. and (orientation: portrait) {
  14. }
  15. /* Landscape */
  16. @media screen
  17. and (device-width: 320px)
  18. and (device-height: 640px)
  19. and (-webkit-device-pixel-ratio: 2)
  20. and (orientation: landscape) {
  21. }
  22. /* ----------- Galaxy S4 ----------- */
  23. /* Portrait and Landscape */
  24. @media screen
  25. and (device-width: 320px)
  26. and (device-height: 640px)
  27. and (-webkit-device-pixel-ratio: 3) {
  28. }
  29. /* Portrait */
  30. @media screen
  31. and (device-width: 320px)
  32. and (device-height: 640px)
  33. and (-webkit-device-pixel-ratio: 3)
  34. and (orientation: portrait) {
  35. }
  36. /* Landscape */
  37. @media screen
  38. and (device-width: 320px)
  39. and (device-height: 640px)
  40. and (-webkit-device-pixel-ratio: 3)
  41. and (orientation: landscape) {
  42. }
  43. /* ----------- Galaxy S5 ----------- */
  44. /* Portrait and Landscape */
  45. @media screen
  46. and (device-width: 360px)
  47. and (device-height: 640px)
  48. and (-webkit-device-pixel-ratio: 3) {
  49. }
  50. /* Portrait */
  51. @media screen
  52. and (device-width: 360px)
  53. and (device-height: 640px)
  54. and (-webkit-device-pixel-ratio: 3)
  55. and (orientation: portrait) {
  56. }
  57. /* Landscape */
  58. @media screen
  59. and (device-width: 360px)
  60. and (device-height: 640px)
  61. and (-webkit-device-pixel-ratio: 3)
  62. and (orientation: landscape) {
  63. }

c) HTC Phones

  1. /* ----------- HTC One ----------- */
  2. /* Portrait and Landscape */
  3. @media screen
  4. and (device-width: 360px)
  5. and (device-height: 640px)
  6. and (-webkit-device-pixel-ratio: 3) {
  7. }
  8. /* Portrait */
  9. @media screen
  10. and (device-width: 360px)
  11. and (device-height: 640px)
  12. and (-webkit-device-pixel-ratio: 3)
  13. and (orientation: portrait) {
  14. }
  15. /* Landscape */
  16. @media screen
  17. and (device-width: 360px)
  18. and (device-height: 640px)
  19. and (-webkit-device-pixel-ratio: 3)
  20. and (orientation: landscape) {
  21. }

2. Tablets

a) iPads

  1. /* ----------- iPad mini ----------- */
  2. /* Portrait and Landscape */
  3. @media only screen
  4. and (min-device-width: 768px)
  5. and (max-device-width: 1024px)
  6. and (-webkit-min-device-pixel-ratio: 1) {
  7. }
  8. /* Portrait */
  9. @media only screen
  10. and (min-device-width: 768px)
  11. and (max-device-width: 1024px)
  12. and (orientation: portrait)
  13. and (-webkit-min-device-pixel-ratio: 1) {
  14. }
  15. /* Landscape */
  16. @media only screen
  17. and (min-device-width: 768px)
  18. and (max-device-width: 1024px)
  19. and (orientation: landscape)
  20. and (-webkit-min-device-pixel-ratio: 1) {
  21. }
  22. /* ----------- iPad 1 and 2 ----------- */
  23. /* Portrait and Landscape */
  24. @media only screen
  25. and (min-device-width: 768px)
  26. and (max-device-width: 1024px)
  27. and (-webkit-min-device-pixel-ratio: 1) {
  28. }
  29. /* Portrait */
  30. @media only screen
  31. and (min-device-width: 768px)
  32. and (max-device-width: 1024px)
  33. and (orientation: portrait)
  34. and (-webkit-min-device-pixel-ratio: 1) {
  35. }
  36. /* Landscape */
  37. @media only screen
  38. and (min-device-width: 768px)
  39. and (max-device-width: 1024px)
  40. and (orientation: landscape)
  41. and (-webkit-min-device-pixel-ratio: 1) {
  42. }
  43. /* ----------- iPad 3 and 4 ----------- */
  44. /* Portrait and Landscape */
  45. @media only screen
  46. and (min-device-width: 768px)
  47. and (max-device-width: 1024px)
  48. and (-webkit-min-device-pixel-ratio: 2) {
  49. }
  50. /* Portrait */
  51. @media only screen
  52. and (min-device-width: 768px)
  53. and (max-device-width: 1024px)
  54. and (orientation: portrait)
  55. and (-webkit-min-device-pixel-ratio: 2) {
  56. }
  57. /* Landscape */
  58. @media only screen
  59. and (min-device-width: 768px)
  60. and (max-device-width: 1024px)
  61. and (orientation: landscape)
  62. and (-webkit-min-device-pixel-ratio: 2) {
  63. }

b) Galaxy Tablets

  1. /* ----------- Galaxy Tab 10.1 ----------- */
  2. /* Portrait and Landscape */
  3. @media
  4. (min-device-width: 800px)
  5. and (max-device-width: 1280px) {
  6. }
  7. /* Portrait */
  8. @media
  9. (max-device-width: 800px)
  10. and (orientation: portrait) {
  11. }
  12. /* Landscape */
  13. @media
  14. (max-device-width: 1280px)
  15. and (orientation: landscape) {
  16. }

c) Nexus Tablets

  1. /* ----------- Asus Nexus 7 ----------- */
  2. /* Portrait and Landscape */
  3. @media screen
  4. and (device-width: 601px)
  5. and (device-height: 906px)
  6. and (-webkit-min-device-pixel-ratio: 1.331)
  7. and (-webkit-max-device-pixel-ratio: 1.332) {
  8. }
  9. /* Portrait */
  10. @media screen
  11. and (device-width: 601px)
  12. and (device-height: 906px)
  13. and (-webkit-min-device-pixel-ratio: 1.331)
  14. and (-webkit-max-device-pixel-ratio: 1.332)
  15. and (orientation: portrait) {
  16. }
  17. /* Landscape */
  18. @media screen
  19. and (device-width: 601px)
  20. and (device-height: 906px)
  21. and (-webkit-min-device-pixel-ratio: 1.331)
  22. and (-webkit-max-device-pixel-ratio: 1.332)
  23. and (orientation: landscape) {
  24. }

d) Kindle Fire

  1. /* ----------- Kindle Fire HD 7" ----------- */
  2. /* Portrait and Landscape */
  3. @media only screen
  4. and (min-device-width: 800px)
  5. and (max-device-width: 1280px)
  6. and (-webkit-min-device-pixel-ratio: 1.5) {
  7. }
  8. /* Portrait */
  9. @media only screen
  10. and (min-device-width: 800px)
  11. and (max-device-width: 1280px)
  12. and (-webkit-min-device-pixel-ratio: 1.5)
  13. and (orientation: portrait) {
  14. }
  15. /* Landscape */
  16. @media only screen
  17. and (min-device-width: 800px)
  18. and (max-device-width: 1280px)
  19. and (-webkit-min-device-pixel-ratio: 1.5)
  20. and (orientation: landscape) {
  21. }
  22. /* ----------- Kindle Fire HD 8.9" ----------- */
  23. /* Portrait and Landscape */
  24. @media only screen
  25. and (min-device-width: 1200px)
  26. and (max-device-width: 1600px)
  27. and (-webkit-min-device-pixel-ratio: 1.5) {
  28. }
  29. /* Portrait */
  30. @media only screen
  31. and (min-device-width: 1200px)
  32. and (max-device-width: 1600px)
  33. and (-webkit-min-device-pixel-ratio: 1.5)
  34. and (orientation: portrait) {
  35. }
  36. /* Landscape */
  37. @media only screen
  38. and (min-device-width: 1200px)
  39. and (max-device-width: 1600px)
  40. and (-webkit-min-device-pixel-ratio: 1.5)
  41. and (orientation: landscape) {
  42. }

3. Laptops

  1. /* ----------- Non-Retina Screens ----------- */
  2. @media screen
  3. and (min-device-width: 1200px)
  4. and (max-device-width: 1600px)
  5. and (-webkit-min-device-pixel-ratio: 1) {
  6. }
  7. /* ----------- Retina Screens ----------- */
  8. @media screen
  9. and (min-device-width: 1200px)
  10. and (max-device-width: 1600px)
  11. and (-webkit-min-device-pixel-ratio: 2)
  12. and (min-resolution: 192dpi) {
  13. }

4. Wearables

a) Apple Watch

  1. /* ----------- Apple Watch ----------- */
  2. @media
  3. (max-device-width: 42mm)
  4. and (min-device-width: 38mm) {
  5. }

b) Apple Watch

  1. /* ----------- Moto 360 Watch ----------- */
  2. @media
  3. (max-device-width: 218px)
  4. and (max-device-height: 281px) {
  5. }

参考：

  1. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
  2. CSS3: 移动端开发中 max-device-width 与 max-width 的区别

本文转自：CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices

相关文章