Maison > interface Web > tutoriel HTML > Exemple de code sur les problèmes de compatibilité des fenêtres

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

零下一度
Libérer: 2017-05-17 13:20:18
original
1786 Les gens l'ont consulté

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" />
Copier après la connexion

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);
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal