检测所有移动设备的屏幕宽度
问题描述:
当我使用Google Chrome浏览器选择Galaxy S5(360px)进行模拟时,我在检测正确的屏幕宽度时遇到问题。它省略了360px的CSS,并使用768px CSS代替。有没有更好的方法呢?检测所有移动设备的屏幕宽度
@media only screen and (max-device-width: 360px)
{
.header_2{width:100%;height:auto;padding:20px;}
.left_obj{width:290px; position:relative;float:left;margin-bottom:20px;}
.right_obj{width:290px; position:relative;float:left;}
.mini_header{margin-bottom:20px;}
}
@media only screen and (max-device-width: 768px)
{
.header_2{width:100%;height:auto;padding:20px;}
.left_obj{width:370px; position:relative;float:left;margin-bottom:20px;}
.right_obj{width:370px; position:relative;float:left;}
.mini_header{margin-bottom:20px;}
}
答
就改变顺序或媒体查询的逆转。写第一个768媒体查询,然后360.
答
您可以添加meta到您的标题。
<meta name="viewport" content="width=device-width">
您也可以参考此链接的全部细节 http://learn.shayhowe.com/advanced-html-css/responsive-web-design/
媒体条件所有移动设备与景观模式“@media唯一屏幕和(最大设备宽度:767px)”,使用宽度:x% – Saika
解决方案只是设置顺序作为#MukeshRam的回答 –