我尝试为移动设备和平板电脑创建媒体查询，当我使用普通浏览器时它们确实可以工作(在我的台式计算机上，我使屏幕变小)，但当我使用普通浏览器时它们就不起作用实际的手机或平板电脑。我已经完成了 CSS 和 HTML 验证，所以我无法想象会是这样。
我的网站已在我的大学服务器上启动并运行，因此您可以从那里查看我的媒体查询:http://stc110.edu.csesalford.com/或http://stc110.edu.csesalford.com/general.css
这些是我的媒体查询:
/*Styles for screen 600px and lower*/
@media handheld, screen and (max-width: 600px) {
#navigation {
height: auto;
}
#navigation ul {
width: 100%;
display: block;
height: auto;
}
#navigation li {
width: 50%;
float: left;
position: relative;
}
#navigation li a {
border-bottom: 1px solid #ff9999;
border-right: 1px solid #ff9999;
}
#navigation a {
text-align: left;
width: 100%;
text-indent: 25px;
}
header {
padding-top: 30px;
}
}
/*Styles for screen 480px and lower*/
@media handheld, screen and (max-width : 480px) {
#navigation {
border-bottom: 0;
}
#navigation ul {
display: none;
height: auto;
}
#navigation a#pull {
display: block;
background-color: #ff6666;
width: 100%;
position: relative;
}
#navigation a#pull:after {
content:"";
background: url('images/nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
/*Smartphone*/
@media handheld {
#navigation {
border-bottom: 0;
}
#navigation ul {
display: none;
height: auto;
}
#navigation a#pull {
display: block;
background-color: #ff6666;
width: 100%;
position: relative;
}
#navigation a#pull:after {
content:"";
background: url('images/nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
最佳答案
请将以下代码放入头部
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
关于css - 为什么我的媒体查询不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34589687/