html - 检测所有移动设备的屏幕宽度

Question

当我使用 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;}

}

Answer 1

只需更改媒体查询的顺序或反转即可。先写768媒体查询再写360。