Question

我尝试使用媒体查询来使我的网站响应。我有一个div，在正常大小的桌面浏览器上占视口总宽度的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%;
}

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

编辑：我设置了一个在调整浏览器大小时似乎有用的演示（我添加了背景颜色，因此可以看到div宽度）：http://codepen.io/anon/pen/AtysL

Answer 1

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

应该工作得很好。

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

1 个答案: