Ich habe mehrere Javascript-Funktionen ausprobiert, aber es funktioniert nicht für mich. Ich baue eine mobile reaktionsfähige Website und einige der Funktionen geben mir andere Ergebnisse.Wie erhalten Sie genaue Bildschirmhöhe und -breite in Javascript?
Dies sind die Funktionen, die ich verwendet habe.
Browser Ziel: UC Browser, Opera Mini, Chrome, Firefox. Hinweis: Ich verwende jQuery nicht für dieses Projekt.
Vorschuss dank denen, die mir helfen werden. :)
Verwenden Sie am besten die window.innerHeight und window.innerWidth. Die Eigenschaften innerHeight und innerWidth erfassen die Dimension des Browserfensters. Dies ist, was css Media Query verwendet, um Responsive Layouts zu tun. Sie können auch window.outerWidth und window.outerHeight verwenden. Der Unterschied zwischen Innen und Außen sind die Ränder, Paddings und Browserinhalte, die der Browser des Clients dem Fenster hinzufügt.
Die Eigenschaften width und height des Bildschirmobjekts erfassen die Bildschirmauflösung des Clientcomputers. Dies ist definitiv nicht das, was Sie wollen, besonders in dem Fall, in dem ein Kunde Ihre Website in einer geteilten Ansicht hat. clientWidth und clientHeight geben die Gesamtgröße des Dokuments in der aktuellen Browseransicht an. Auch dies ist definitiv nicht das, was Sie für responsives Design benötigen.
Überprüfen Sie jedoch this für mehr Erklärung und eine saubere Art der Verwendung von Medienabfrage in JavaScript. Ansonsten versuchen w3schools example of inner width
window.innerWidth, window.innerHeight, window.outerWidth, window.outerHeight erhalten Sie die richtige äußere, innere Höhe und Breite des Ansichtsfenster-Bildschirm und kann diese verwenden, während auf Responsive Design arbeiten. Aber eine Medienabfrage oder Bootstrap-basierte Website ist am besten, wenn Sie eine reaktionsschnelle Website planen. Und wenn Sie Javascript verwenden, verwenden Sie window.innerWidth+innerHeight Eigenschaft.
document.documentElement.clientWidth + document.documentElement.clientHeight gets Sie die Höhe und Breite von html tag <html>
document.body.clientWidth + document.body.clientHeight gets Sie die Höhe und Breite von body tag <body>
function ld(){
var a = window.innerWidth;
var b = window.innerHeight;
var c = window.outerWidth;
var d = window.outerHeight;
console.log("innerWidth = " +a +" " +"innerHeight = " +b +" "+"outerWidth = " +c +" " +"outerHeight = " +d);
}
window.addEventListener("load",ld());
Ich benutze Medienabfragen. Es ist gut, aber wenn Sie in Opera Mini und UC-Browsern entwickeln. Ein Teil der Elementeigenschaft wird nicht funktionieren. Aus diesem Grund habe ich userAgent verwendet, um den Browser zu erkennen und einige Fallback-Eigenschaften auf ein bestimmtes Element anzuwenden. Viewport-Höhe von css funktioniert bei einigen Browsern nicht. Es ist ziemlich schwierig, Websites in einem mobilen Browser zu entwickeln, da sie den Geschwindigkeitsmodus bieten. Und ich sollte die Website im Speed-Modus weiter machen. Damit es in jeder Hinsicht richtig rendert. –
Nun, ich bin auch durch dieses Problem bei der Entwicklung von Websites mit Wordpress gekommen und es gibt einige teilweise Unterstützung Problemformular Browserseite. http://stackoverflow.com/questions/30851085/css-responsive-design-in-mobile-isnot-working-on-uc-browser-and-opera-mini überprüfen Sie diesen Link wird Ihnen helfen. – frnt
Danke, mein Herr. Ich werde versuchen, es zu lesen und zu implementieren, wenn es möglich ist. –
OS Chrom (Bildlaufleisten, Menüleisten, etc.) und die Chrom des Browsers selbst wird Schneiden Sie aus, was das Fenster zur Verfügung hat. http://www.quirksmode.org/dom/w3c_cssom.html#screenview – flowtron