gpt4 book ai didi

css - Safari 开发者 iphone 模式不起作用?

转载 作者:太空宇宙 更新时间:2023-11-03 22:07:31 25 4
gpt4 key购买 nike

我开始学习如何设计一个网站,以便在 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;
}

桌面.css

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

无论我如何设置 Safari 开发人员,它都会显示 700 像素宽、居中、红色边框的 div 版本,而不是 480 像素宽的黑色。我错过了什么?元标记?还是其他?

已解决:如果浏览器宽度为 480 像素或小于 480 像素,则自动应用 iphone.css。它甚至不需要设置为 iPhone 用户代理。谢谢 jack 劳伦斯!

最佳答案

您实际上需要将浏览器窗口的大小调整为 480 像素或更小,CSS 中的媒体查询才能正常工作。

关于css - Safari 开发者 iphone 模式不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4667590/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com