Créez un affichage à zoom adaptatif sur un téléphone mobile avec les compétences JS_javascript

JS pour créer un affichage à zoom adaptatif sur téléphone mobile

Exemple 1 :

<script>
var _width = parseInt(window.screen.width);
var scale = _width/640;
var ua = navigator.userAgent.toLowerCase();
var result = /android (\d+\.\d+)/.exec(ua);
if (result){
var version = parseFloat(result[1]);
if(version>2.3){
document.write('<meta name="viewport" content="width=640, minimum-scale = '+scale+', maximum-scale = '+scale+', target-densitydpi=device-dpi">');
}else{
document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
}
} else {
document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
}
</script>

Exemple 2 :

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
 if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
  var viewportmeta = document.querySelector('meta[name="viewport"]');
   if (viewportmeta) {
    viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
  document.addEventListener('touchstart', function () {
   viewportmeta.content = 'viewportmeta.content = width=device-width, minimum-scale=0.25, maximum-scale=1.6';
  }, false);
   document.addEventListener('orientationchange', function () {
   viewportmeta.content = 'viewportmeta.content = width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
  }, false);
   }
  }
});
</script>

Exemple 3 :

<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">

Résumé :

1. Ce n’est en fait pas difficile. Tout d’abord, ajoutez une ligne de balises méta de fenêtre en tête du code de la page Web.

2. N'utilisez pas de largeur absolue Étant donné que la page Web ajustera la mise en page en fonction de la largeur de l'écran, vous ne pouvez pas utiliser la mise en page de largeur absolue, ni les éléments de largeur absolue.

3. Les polices de taille relative ne peuvent pas utiliser des tailles absolues (px), mais uniquement des tailles relatives (em).

4. Grille fluide La signification de « grille fluide » est que la position de chaque bloc est flottante et non fixe.

.main { float : droite ; largeur : 70 % ; } .leftBar { float : gauche : 25 % ;
5. Image adaptative (image fluide) En plus de la mise en page et du texte, la « conception Web adaptative » doit également mettre en œuvre une mise à l'échelle automatique des images.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.