Question

在任何主要的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”）仅屏幕和（最小宽度：601px）和（最大宽度：1120px）;

Answer 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");
}

Answer 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) {

}

媒体查询在桌面浏览器中工作，但不是移动

2 个答案: