Méthode de mise en œuvre de l'adaptation de la taille des pages Web mobiles

Enfin terminé le projet en cours, la personne disparue est de retour ! Au cours du travail sur le projet, j’ai rencontré de nombreux points qui méritent réflexion, alors expliquons-les rapidement. Le premier problème rencontré est celui de l’adaptation de la taille des pages web.

Actuellement, les méthodes les plus couramment utilisées sont :

• Tout d'abord, faites en sorte que la taille de la page remplisse l'écran sans déborder. . Il vous suffit d'ajouter la fenêtre d'affichage (comme indiqué ci-dessous) dans la balise html. Les paramètres représentent respectivement : largeur de la page = largeur de l'écran. Les taux de mise à l'échelle maximum et minimum sont tous deux de 1, et les utilisateurs ne sont pas autorisés à zoomer ou à zoomer. dehors.

<meta name="viewport" content="width=device-width,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

• Pourcentage adaptatif : convertissez l'unité de longueur en pourcentage, de sorte que la longueur et la largeur de l'élément changent en conséquence sous différentes largeurs.

Avantages : Connexion transparente entre les largeurs et relativement facile à utiliser.

Inconvénients : La taille de la police nécessite un autre ensemble de méthodes adaptatives pour être ajustée ; lorsque la largeur de l'écran est supérieure à 700 px, les éléments seront trop grands s'ils continuent à être basés sur des pourcentages, et ce sera plus gênant. à ajuster à ce moment.

•rem, em adaptatif : utilisez la méthode de requête multimédia pour déterminer la taille de la police ou Utilisez ensuite rem et em au lieu de px comme unité pour réaliser l'adaptation.

Avantages : Il peut être réglé en fonction de différentes largeurs d'écran, ce qui peut parfaitement résoudre le problème de proportion lorsque l'écran est trop grand mentionné ci-dessus. Il n’y a pas non plus de problème avec la taille de la police.

Inconvénients : il est défini en fonction de l'intervalle de largeur et ne peut pas réaliser une transformation transparente.

------------------------------------------------------ ------ ------------------------------------

Ces compatibilités Les méthodes ont chacune leurs propres avantages et inconvénients. Aucune d’entre elles n’est parfaite. Comment combiner les avantages tout en évitant les inconvénients ?

En faisant référence à la méthode adaptative de Taobao, j'ai accidentellement découvert que la taille de la police de la page certain.

Donc, je suppose qu'il utilise JS pour obtenir la largeur de l'écran, puis la réduit selon un rapport fixe et l'utilise comme longueur unitaire de rem pour mettre en œuvre l'adaptation.

N’est-ce pas une solution avec tous les avantages ! ? S'il vous plaît, permettez-moi de m'enthousiasmer (☆_☆)

--------------------------------- --------------------------------------------------

Le code JS est très simple à écrire et il résout parfaitement le problème de l'utilisation de rem pour établir des connexions transparentes.

Mais le problème est survenu après des tests sur le terminal mobile. Safari sur le terminal mobile a exécuté le JS à une vitesse fulgurante avant que le HTML ne soit lu avant que la largeur de la page ne soit définie en fonction de la fenêtre d'affichage. . Une largeur incorrecte fait que l'élément devient deux fois plus grand que 0^0. SetTimeout() doit être utilisé pour résoudre le problème.

------------------------------------------------------ ------ ------------------------------------

Code final

Zepto(function($){   
    var win = window,   
        doc = document;   
  
    function setFontSize() {   
        var winWidth =  $(window).width();   
        // 640宽度以上进行限制   
        var size = (winWidth / 640) * 100;   
        doc.documentElement.style.fontSize = (size < 100 ? size : 100) + &#39;px&#39; ;   
    };   
       
    //防止在html未加载完毕时执行，保证获取正确的页宽   
    setTimeout(function(){   
        // 初始化   
        setFontSize();   
           
    }, 200);   
    
});

Enfin, j'ai ajouté un piège découvert lors du processus d'utilisation de rem pour l'adaptation - lorsque le code HTML est défini sur une taille de police plus grande, la marge et le remplissage des éléments en ligne dans l'élément de bloc aura des valeurs supplémentaires. La solution consiste à définir la taille de la police de l'élément de bloc externe sur 0.

L'article ci-dessus sur la façon de mettre en œuvre la taille auto-adaptative des pages Web mobiles est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence et j'espère que vous soutiendrez le site Web PHP chinois.

Pour plus d'articles sur la façon de mettre en œuvre une taille de page Web adaptative sur les terminaux mobiles, veuillez faire attention au site Web PHP chinois !