0

我有这两条规则：

<link rel="stylesheet" media="screen and (max-width:960px)" type="text/css" href="css/mobileStyles.css">
<link rel="stylesheet" media="screen and (max-width:640px)" type="text/css" href="css/mobilePortraitStyles.css">

它们在我的浏览器上工作（当我调整浏览器宽度时）但是当我在我的 iPhone 上检查它们时，无论是纵向还是横向，它都会加载两个样式表。

为什么在横向视图中它加载 640px 样式表？

4

3 回答 3

2

iPhone safari 浏览器的 web 视图大小为 320x480px 或横向 480x320px 两种显示类型。因此，Web 开发人员无需针对非 Retina 和 Retina 显示器调整其 css 的大小。

仅针对 Retina 显示屏

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="../iphone4.css" />

在您的情况下，第二个样式表已加载，因为在这两种情况下（320 或 480 像素）您的网络视图都低于 640 像素。

我建议您使用方向作为 css 媒体查询。

于 2011-11-28T22:16:31.247 回答
0

head在您的 HTML 文档中添加以下内容：

<meta name="viewport" content="width=device-width, initial-scale=1"/>

于 2011-11-28T16:48:57.260 回答
0

写max-device-width而不是max-width

<link rel="stylesheet" media="screen and (max-device-width:960px)" type="text/css" href="css/mobileStyles.css">
<link rel="stylesheet" media="screen and (max-device-width:640px)" type="text/css" href="css/mobilePortraitStyles.css">

此外，最好这样定义它们orientation：

<link rel="stylesheet" media="screen and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="screen and (orientation:landscape)" href="landscape.css">
于 2011-11-28T16:52:28.160 回答