针对 iPhone iPad 的 CSS 样式表不起作用

Question

我只有两周的时间让我的网站在 iPad iPhone 上运行，只需要更改一些边距和一些字体大小。我在网上找到了这个教程，说要添加这个代码：

<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)"  href="css/style_ipad.css" />
<link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="css/style_ipad.css" />
<!--<![endif]-->

所以我在正常样式表的链接上方添加了这个，并上传了带有我的调整的 style_ipad.css，但它没有奏效。任何人都知道为什么这不起作用？这是过时的吗？

Answer 1

在使用“设备宽度”定义媒体查询时，您必须记住它指的是渲染屏幕的实际像素宽度（这在视网膜显示器上会变得很棘手） - 请参阅http://www.w3.org/TR/css3-mediaqueries/ 中的第 4.3 节。要获得实际宽度，您必须使用像素比率来解释它。

但您也可以简单地更改媒体查询以检查您的文档输出到的浏览器/视口的宽度。只需删除查询中的 device 部分：

<link type="text/css" rel="stylesheet" media="only screen and (max-width: 480px)"  href="css/style_ipad.css" />
<link type="text/css" rel="stylesheet" media="only screen and (min-width: 768px) and (max-width: 1024px)" href="css/style_ipad.css" />

有关device-width 和width 之间区别的更完整定义，请参阅这两个回复：

What is the difference between max-device-width and max-width for mobile web?

Difference between width and device-width in CSS media queries

Answer 2

它并没有过时，但既然你说你将它添加到在你的正常样式表之上，你的样式规则很可能被覆盖了。毕竟，它们是级联样式表。

我还想指出，您在两个链接标签中都链接到同一个文件 css/style_ipad.css。