为什么我的iPhone不能区分960px和640px样式表
为什么我的iPhone不能区分960px和640px样式表
提问于 2011-11-29 00:33:45
我有两条规则：
<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的样式表？
回答 3
Stack Overflow用户
回答已采纳
发布于 2011-11-29 06:16:31
对于这两种显示类型，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或480px)你的web视图都低于640px。
我建议您使用方向作为css媒体查询的情况。
Stack Overflow用户
发布于 2011-11-29 00:48:57
在HTML文档的head中添加以下内容：
<meta name="viewport" content="width=device-width, initial-scale=1"/>
Stack Overflow用户
发布于 2011-11-29 00:52:28
编写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">页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8299032
复制相关文章
相似问题
腾讯云开发者
