Exemple de code sur les problèmes de compatibilité des fenêtres

J'ai récemment développé un site Web mobile et j'ai rencontré quelques problèmes lors de l'utilisation de viewport

Après de nombreuses tentatives, la situation actuelle est que les navigateurs fournis avec UC, Chrome et Android, Safari. peut afficher le taux de zoom comme vous le souhaitez.

Cependant, dans le navigateur QQ, qui compte un grand nombre de utilisateurs, il semble que la fenêtre d'affichage ne puisse pas être reconnue (ou ne puisse pas être utilisée).

Le code est le suivant :

HTML

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

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);

Si vous supprimez le commentaire d'alerte, le navigateur QQ apparaîtra jusqu'à afficher le taux de zoom requis, mais il n'y a toujours pas d'échelle nécessaire.

【Recommandations associées】

1 Recommandation spéciale : "boîte à outils du programmeur php" V0 .1. téléchargement de la version

2. Partagez l'attribut viewport pour résoudre le problème de réinitialisation de la police lors du passage de l'écran vertical à l'écran horizontal sur le terminal mobile

3. Sujet Viewport : Compréhension approfondie de la conception Web réactive en CSS - viewport

4 Introduction aux paramètres de Viewport en HTML5 et comment l'utiliser.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!