window.innerWidth im Geräte-Modus von Chrome

Wenn in Google Chrome Gerätemodus, was window.innerWidth zurückgibt? Ist es das Ansichtsfenster des Geräts (plus Bildlaufleisten)?window.innerWidth im Geräte-Modus von Chrome

Ich erhalte unterschiedliche Werte für die Breite x Höhe des Geräts (die Abmessungen oben auf der Seite - das Ansichtsfenster des Geräts?) Und window.innerWidth x window.innerHeight (Browser-Ansichtsfenster?). Soll das passieren?

Hier ist ein Bild von dem, was ich bekomme, und den Code, den ich verwendet habe.

<!doctype html> 
<html> 
<head></head> 
<body> 
<script> 
var image; 

window.onload = function() { 
    image = document.getElementById("img"); 
    checkWindowSize(); 
    window.addEventListener('resize', function(event){ 
    checkWindowSize(); 
    }); 
} 

function checkWindowSize() { 
    var width = window.innerWidth, 
     height = window.innerHeight; 

    console.log("window.innerHeight: ", window.innerHeight, " window.innerWidth: ", window.innerWidth); 
} 
</script> 

<img id="img" class="vid-img-filter" src="http://i.imgur.com/jkhFJMn.jpg" alt=""> 
</body> 
</html>

Quelle

2016-03-30 jonGomez

window.innerWidth und innerHeight Rückkehr die Dimensionen des visuellen Ansichtsfensters. In Desktop-Browsern sind dies in der Regel die Fensterdimensionen des Browsers. Bei mobilen Geräten ist die Situation aufgrund des Pinch-Zooms etwas komplizierter.

Wenn Sie eine Seite ohne das Tag <meta name="viewport"> laden, wird die Standardbreite des Layouts verwendet (z. B. Chrome verwendet 980px). Wenn der Browser die Seite lädt, wird sie maximal verkleinert. Es sieht so aus, als ob Ihre Gerätegröße eine Breite von 425 px hat, so dass der Browser zoomt, wenn die Seite geladen wird, um das ganze 980 Pixel zu sehen. Wenn Sie Inhalte haben, die breiter sind als das hier (z. B. Ihr Bild), wird es noch weiter herausgezoomt. Wenn Sie sehen, wie Ihr window.innerWidth 1248 ist, bedeutet das einen Skalierungsfaktor von etwa 30%.

tl; dr: innerWidth/innerHeight reflect Ansichtsfenster mit dem Pinch-Zoom-Faktor angewendet und die Seite wird vollständig ausgezoomt geladen.

EDIT: Dies hat sich seit Chrome geändert. window.innerWidth gibt jetzt das Layout-Ansichtsfenster Breite zurück. Verwenden Sie window.visualViewport.width, um die visuelle Ansichtsfensterbreite zu erhalten. Weitere Informationen finden Sie unter this article.

Quelle

2016-03-30 19:13:14

GROSSE Erklärung. Vielen Dank. Ich habe versucht, deine Frage zu verbessern, aber ich brauche mindestens 15 Wiederholungen :( – jonGomez

enter image description here

Kopie und der Code eingefügt und laufen ... Wie Sie die Bilder sehen können, ist es normal funktioniert ....

Quelle

2016-03-30 01:43:44

Vielen Dank für Ihre Antwort. Die Auflösung deines Bildes ist zu niedrig. Ich kann die Abmessungen des Geräts und den Wert von window.innerWidth und window.innerHeight nicht sehen. Die Frage steht immer noch: Was soll window.innerWidth und window.innerHeight im Gerätemodus zurückgeben? Die Größe des Darstellungsbereichs, die Dokumentgröße oder etwas anderes? Und ist das in meinem ursprünglichen Beitrag beschriebene Verhalten normal? – jonGomez

window.innerWidth im Geräte-Modus von Chrome

Antwort

Verwandte Themen