Html 媒体查询似乎没有响应_Html_Ios_Css_Mobile_Media Queries

Html 媒体查询似乎没有响应

html ios css mobile

Html 媒体查询似乎没有响应,html,ios,css,mobile,media-queries,Html,Ios,Css,Mobile,Media Queries,我试着用媒体查询来提高我的网站的响应能力。我有一个div，在正常大小的桌面浏览器上，它是视口总宽度的50%。当使用移动iOS时，我希望将其更改为宽度的100%。当前可与以下HTML一起使用： <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <meta name="viewport" content="initial-sca

我试着用媒体查询来提高我的网站的响应能力。我有一个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>

而smalldevice.css是：

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

#social {
width:50%;
}

调整浏览器窗口的大小时，当我的视口宽度达到640px时，它会将#social的宽度更改为100%。在iOS手机上进行测试也很有效。但当切换到横向模式时（视口宽度变为1136px，因此使用媒体查询，它不会将#社交元素的宽度更改为50%。在具有可调整大小窗口的桌面上，它确实可以工作。出了什么问题

编辑：我在此处设置了一个演示，在调整浏览器大小时似乎可以正常工作（我添加了背景色，以使div宽度可见）：

应该可以正常工作。

不幸的是，当你在电脑上使用该网站时，它不会更改为50%，因为这需要横向。或者我应该切换到“最大宽度”，然后将移动版本包含在其中？编辑，我犯了一个错误：它会更改为50%。谢谢，这解决了我的问题！

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

#social {
width:50%;
}

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