媒体查询在桌面浏览器中工作，但不适用于移动设备答案

【问题标题】：Media Querys working in desktop browsers, but not mobile媒体查询在桌面浏览器中工作，但不适用于移动设备
【发布时间】：2013-12-08 15:12:51
【问题描述】：

在任何主要的 5 个最新浏览器中都可以正常工作，但在任何移动设备上都不能正常工作，不知道为什么。

这是我的代码

/* Desktop */
@import url("desktop.css");

/* Small Phone */
@import url("smallMobile.css") only screen and (max-width:320px);

/* Large Phone and small Tablet */
@import url("largeMobile-smallTablet.css") only screen and (min-width:321px) and (max-width:600px);

/* 平板电脑和小型台式机*/ @import url("tablet-smallDesktop.css") 仅屏幕和 (min-width:601px) 和 (max-width:1120px);

【问题讨论】：

标签： html css mobile media-queries

【解决方案1】：

试试

@media only screen and (min-width:321px) and (max-width:600px) {
  @import url("largeMobile-smallTablet.css");
}

或

@media only screen and (min-device-width:321px) and (max-device-width:600px) {
  @import url("largeMobile-smallTablet.css");
}

【讨论】：

【解决方案2】：

使用device-width 并确保您知道要定位哪些手机；较新的 iPhone 具有不同的 device-pixel-ratio 值，这会改变 device-width

以下是针对不同 iPhone 的媒体查询（在此处查看更常见的维度，https://css-tricks.com/snippets/css/media-queries-for-standard-devices/）：

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}


/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}


/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

对于 iPad：

/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

【讨论】：