iPhone：媒体CSS代码不起作用

Question

我有这个@media设置

 <head>
  <meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
CSS:

@media screen and (min-width: 769px) {
    /* STYLES HERE */
}

@media screen and (min-device-width: 481px) and (max-device-width: 768px) { 
    /* STYLES HERE */
}

@media only screen and (max-device-width: 480px) {
    /* STYLES HERE */
}

使用此设置可以在iPhone上查看它，但不能在浏览器中使用。 确实很烦人，非常感谢您的帮助。 是因为我已经在meta中拥有设备，而可能却拥有（max-width：480px）吗？

Answer 1

您是否可以澄清您的问题尚不清楚，这是什么意思，它在浏览器中不起作用？ 在浏览器中什么不起作用？

这是您的查询对我的意思：

@media screen and (min-width: 769px) {}

这表示对于现代移动设备（较旧的移动设备不属于屏幕类别，而较新的iPhone属于此类）或屏幕宽度等于或大于769像素的台式设备适用此功能。 （桌面）您可以将其缩写为@media（最小宽度：769px），并获得相同的结果。

请注意，属于“屏幕”类别的iPhone将基于其当前方向。 因此，肖像和风景必须分开对待。

@media screen and (min-device-width: 481px) and (max-device-width: 768px) { }

对于最小屏幕分辨率为481像素宽但不超过768像素宽的设备，请执行此操作。

@media only screen and (max-device-width: 480px) {

对于最大屏幕分辨率为480px的现代设备，请执行此操作。

您的媒体查询都与iPhone不相关，因为您使用的max-device-width等于设备分辨率，而iPhone的分辨率远大于480甚至768。我认为大约是1280（我必须看一下它）向上）。 但是更简单的解决方法是使用最大宽度，也可以将它们结合使用：

@media screen and (max-device-width:768px), (max-width:768px) {}

进一步阅读：

CSS3媒体查询规范

iPhone：媒体CSS代码不起作用

问题描述

1 个解决方案

解决方案1
0 2014-08-18 08:32:23

iPhone：媒体CSS代码不起作用

问题描述

1 个解决方案

解决方案1 0 2014-08-18 08:32:23

解决方案1
0 2014-08-18 08:32:23