gpt4 book ai didi

html - 媒体查询 iOS 视网膜似乎没有响应

转载 作者:太空宇宙 更新时间:2023-11-04 13:58:53 25 4
gpt4 key购买 nike

我刚刚尝试使用媒体查询来使我的网站响应。我有一个 div,在正常大小的桌面浏览器上是视口(viewport)总宽度的 50%。使用移动 iOS 时,我希望将其更改为宽度的 100%。目前适用于以下 HTML:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="initial-scale=1.0" />
<link href='style.css' rel='stylesheet' type='text/css'>
<link href="smalldevice.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="social">Content</div>
</body>
</html>

关于普通页面的 CSS 是:

#social {
position:relative;
margin-top:50px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
text-align:center;
width: 100%;
max-width:640px;
}

smalldevice.css 是:

@media screen and (min-width: 640px) {

#social {
width:50%;
}

调整我的浏览器窗口大小时,当我达到 640 像素的视口(viewport)宽度时,它将 #social 的宽度更改为 100%。在 iOS 移动设备上测试也可以。但是当更改为横向模式时(视口(viewport)宽度变为 1136 像素,因此使用媒体查询时,它不会将 #social 元素的宽度更改为 50%。在具有可调整大小窗口的桌面上它确实有效。出了什么问题?

编辑:我在此处设置了一个演示,它在调整浏览器大小时似乎可以正常工作(我添加了背景颜色,因此 div 宽度可见):http://codepen.io/anon/pen/AtysL

最佳答案

@media screen and (min-width: 640px), (orientation: landscape)

应该工作得很好。

关于html - 媒体查询 iOS 视网膜似乎没有响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21650732/

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