Maison > interface Web > js tutoriel > Créez un affichage à zoom adaptatif sur un téléphone mobile avec les compétences JS_javascript

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

WBOY
Libérer: 2016-05-16 15:55:43
original
1260 Les gens l'ont consulté

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>

Copier après la connexion

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

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

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.

Étiquettes associées:
js
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