Question

我开始学习如何设计一个可以在iOs的Safari浏览器上工作并且看起来不错的网站。我不拥有iPhone / iPod，所以我必须在PC Safari的开发者模式下测试我设置为iPhone。

问题是它不起作用，我不知道我的HTML是不是坏，或者浏览器不是我认为的那么好的开发工具。

我的HTML（它只是一个简单的测试）：

<!doctype html> 
<html lang="en"> 
<head> 
    <title>iPhone css test</title> 

    <meta charset="utf-8" />
    <meta name="viewport" content="user-scalable=no, width=device-width" />

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

</head> 
<body> 
<div id="test">
    lorem ipsum
</div>
</body>
</html>

我的两个css：

iphone.css

#test{
    width: 480px;
    border: 1px solid #000000;
}

desktop.css

#test{
    width: 700px;
    margin: 0 auto;
    border: 1px solid #ff0000;
}

没有米我如何设置Safari开发者，它显示了700px宽，居中，红色边框版本的div，而不是480px宽黑色。我错过了什么？元标记？还是其他？

已解决：如果浏览器宽度为480px或小于480px，则iphone.css会自动应用。它甚至不需要设置为iPhone用户代理。谢谢杰克劳伦斯！

Answer 1

您需要将浏览器窗口的大小调整为480px或更低，以便CSS中的媒体问题能够正常工作。

Answer 2

您只看到一个div的原因是因为您的HTML标记中只有一个div。

红色边框，700px宽和居中的原因是因为CSS（层叠样式表）的工作方式。这是Cascade部分，无论哪个规则最接近底部都将被使用。因此，如果您将头部链接的顺序切换为：

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

它可能会像你期望的那样结束。

那个或你的iPhone CSS黑客无效。

Answer 3

你有三个问题。

您无法根据窗口大小更改样式表（没有一些花哨的javascript）。 Safari for Windows仍将使用desktop.css文件，因为它具有潜力以扩大规模。
将您的Useragent更改为Mobile Safari并没有太大作用。 它不能替代在设备上进行测试。用户只是一个识别字符串，所以你需要一些javascript才能获得该用户并测试它是否是iOS用户，然后选择合适的屏幕尺寸。您可能希望看到http://en.wikipedia.org/wiki/User_agent。
视网膜显示怎么样？

Safari开发者iphone模式不能正常工作？

3 个答案: