Обнаружение ширины экрана для всех мобильных устройств

Question

Когда я моделирую с помощью инспектора Google Chrome, который выбирает Galaxy S5 (360 пикселей), у меня возникают проблемы с определением правильной ширины экрана. Он пропускает CSS для 360px и вместо этого использует CSS 768px. Есть ли лучший способ обойти это?

@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.

Answer 2

Вы можете добавить мета в свой заголовок.

<meta name="viewport" content="width=device-width"> 

вы также можете обратиться к этой ссылке для получения полной информации http://learn.shayhowe.com/advanced-html-css/responsive-web-design/