Erkennung der Bildschirmbreite für alle mobilen Geräte

Question

Wenn ich mit Google Chrome Inspektor das Galaxy S5 (360px) vorwähle, habe ich Probleme, die richtige Bildschirmbreite zu erkennen. Es lässt das CSS für das 360px aus und verwendet stattdessen das 768px CSS. Gibt es einen besseren Weg?

@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

Nur die Reihenfolge ändern oder Ihre Medien Abfrage umkehren. Schreibe zuerst 768 Media-Abfrage dann 360.

Answer 2

Sie können Meta zu Ihrer Kopfzeile hinzufügen.

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

Sie können auch für weitere Informationen zu diesem Link finden http://learn.shayhowe.com/advanced-html-css/responsive-web-design/