我使用媒体查询的 CSS 无法正确检测设备... 我的代码:
@media screen and (min-width: 240px) and (max-width: 320px) {
#test{
width:50px;
height:50px;
background-color:blue;
}
}
@media screen and (min-width: 640px) {
#test{
width:50px;
height:50px;
background-color:red;
}
}
我希望 div 在 HTC wildfire 等小型手机上为蓝色,在 iPad Mini 等平板电脑上为红色。
最佳答案
从评论延伸:
小型设备上的浏览器倾向于稍微缩放网页。要获得媒体查询的“真实”维度,请添加
<meta name="viewport" content="initial-scale=1.0" />
到文档的头部。
要检查“呈现的”维度,请使用如下内容:
<script type="text/javascript">
window.addEventListener("load",function(){
var box=document.body.getBoundingClientRect();
document.getElementById("whatever").value=box.width+" x "+box.height;
},false);
</script>
这可能会也可能不会阻止浏览器本身的缩放设置,但至少会阻止“自动”缩放。
根据我自己的经验,有些情况,比如 <p>
长句,可能会导致浏览器缩小,使其更像是“一个句子”。通过指定 initial-scale=1.0
, Opera Mobile 仍会缩放到其设置(默认为 125%),但不会超过这个值,长句会自动换行。
关于css - 媒体查询不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15763041/