Heim > Web-Frontend > HTML-Tutorial > Beispielcode zu Problemen mit der Darstellungsfensterkompatibilität

Beispielcode zu Problemen mit der Darstellungsfensterkompatibilität

零下一度
Freigeben: 2017-05-17 13:20:18
Original
1787 Leute haben es durchsucht

Ich habe kürzlich eine mobile Website entwickelt und bin bei der Verwendung auf einige Probleme gestoßen viewport

Nach vielen Versuchen ist die aktuelle Situation, dass die Browser, die mit UC, Chrome und Android geliefert werden, Safari sind kann das Zoomverhältnis wie erwartet anzeigen.

Im QQ-Browser, der eine große Anzahl von

Benutzern hat, scheint es jedoch, dass das Ansichtsfenster nicht erkannt (oder nicht verwendet) werden kann.

Der Code lautet wie folgt:

HTML

<meta id="viewport" content="
    target-densitydpi=device-dpi, 
    user-scalable=no, 
    width=device-width, 
    initial-scale=0.5" name="viewport" />
Nach dem Login kopieren
JavaScript

var viewPortScale;
var dpr = window.devicePixelRatio;
if(dpr <= 2) {
    viewPortScale = 1 / window.devicePixelRatio;
} else {
    viewPortScale = 0.5
}

document.getElementById(&#39;viewport&#39;).setAttribute(
        &#39;content&#39;, 
        &#39;user-scalable=no, 
         width=device-width, 
        initial-scale=&#39; + viewPortScale);

// alert(viewPortScale);
Nach dem Login kopieren
Wenn Sie den Warnkommentar entfernen, wird der QQ-Browser angezeigt nach oben, um das erforderliche Zoomverhältnis anzuzeigen, aber es gibt immer noch keine Skalierung nach Bedarf.

【Verwandte Empfehlungen】


1.

Besondere Empfehlung: "php Programmer Toolbox" V0 .1 Versions-Download

2.

Teilen Sie das Viewport-Attribut, um das Problem zu lösen, dass die Schriftart beim Wechsel vom vertikalen Bildschirm zum horizontalen Bildschirm auf dem mobilen Endgerät zurückgesetzt wird

3.

Viewport-Thema: Vertiefendes Verständnis von responsivem Webdesign in CSS – Viewport

4

Einführung in die Parameter von Viewport in HTML5 und wie man es verwendet

Das obige ist der detaillierte Inhalt vonBeispielcode zu Problemen mit der Darstellungsfensterkompatibilität. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage