我正在尝试将一些响应式设计元素应用于网站。我的目标是根据屏幕宽度隐藏右侧。我已经能够在我的桌面(最小化窗口时)以及我的 iPhone 上更改行为。但是，我的安卓设备仍然像完整的桌面网站一样显示右侧。
我将 max-width 设置为 750px，但将其增加到 1000 以尝试让 andriod 做一些事情，但仍然不走运。
我的 CSS 原来是这样的:
#container {
width: 980px;
text-align: left; margin: 10px auto; font-family: Arial; font-size: 1em;
}
#rightnav {
float: right; align: center; width: 300px !important; margin: 0; padding: 12px 5px 5px 5px;
}
在 CSS 中，我添加了媒体查询内容:
@media all and (max-width: 1000px) {
#container {
width: 95%;
margin: 5px auto;
padding: 5px;
}
#rightnav {
display:none;}
我没有完美，但在最小化的桌面屏幕或我的 iphone4 上，右侧不显示，表明响应式设计正在工作。然而，在安卓上，CSS 根本没有响应。
一如既往，提前致谢...
最佳答案
添加视口(viewport)标签:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
关于php - CSS 媒体查询 - Android 没有响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13981691/