2016-04-04 9 views
0

Ich habe gelesen, dass width in Metaviewport-Tag definiert die virtuelle Breite des Ansichtsfensters und dann dieses Ansichtsfenster wird skaliert, um den Bildschirm gemäß der initial-scale zu füllen. Das Problem ist, dass ich keinen Unterschied sehe, wenn ich den width = device-width zu irgendeinem anderen Wert wie width = 600 oder width = 1200 ändere. Nach zwei Versionen gemacht werden gleiche:Was bedeutet "Breite" im Meta-Viewport-Tag?

width = 600:

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width= 600px, initial-scale = 2"> 
<style> 


    * { 
     box-sizing: border-box; 
    } 
    html, body {  
     height: 100%; 
     width: 100%; 
    } 
    ul { 
     list-style: none; 
    } 
    .container { 
     width: 96px; 
     height: 96px; 
     position: relative; 
     border: 1px solid #333;  
    } 


</style> 
</head> 

<body> 
<div class="container"> Hello 

</div> 

</body> 
</html>  

width = 50:

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width= 50, initial-scale = 2"> 
<style> 


    * { 
     box-sizing: border-box; 
    } 
    html, body {  
     height: 100%; 
     width: 100%; 
    } 
    ul { 
     list-style: none; 
    } 
    .container { 
     width: 96px; 
     height: 96px; 
     position: relative; 
     border: 1px solid #333;  
    } 


</style> 
</head> 

<body> 
<div class="container"> Hello 

</div> 

</body> 
</html>  
+0

Welche Browser und Betriebssysteme verwenden Sie, um dies zu testen? – Quentin

+0

@Quentin Ich benutze Windows 7 und Google Chrome. – user31782

Antwort

1

Meta-Ansichtsfenster wird verwendet, Seiten auf atypisch großen Bildschirmen zu helfen, zu machen.

Chrome auf einem Windows 7 Desktop-skalierten Bildschirm wird es nicht unterstützen.

Um einen Effekt zu sehen, müssten Sie etwas wie Chrome für Android oder Mobile Safari auf iOS auf einem Smartphone-Display verwenden.

+0

Ich habe versucht, inspect Element und dann verschiedene Auflösungen im mobilen Modus einstellen. Alles andere im Viewport-Tag funktioniert wie "Initial-Scale". – user31782