为什么我的iPhone分辨不出960px和640px样式表之间的区别

Question

我有这两条规则:

<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样式表?

Answer 1

iPhone safari浏览器的网页视图大小为320x480px或480x320px的横向显示类型。因此，web开发人员不需要为非视网膜和视网膜显示调整css的大小。

仅针对视网膜显示

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

在你的情况下，第二个样式表被加载，因为在这两种情况下(320或480px)，你的网页视图在640px以下。

Answer 2

将此添加到HTML文档的head中:

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

Answer 3

用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">