Comment définir la fenêtre d'affichage pour iphone ou ipad?

J'ai un site web qui nécessite l'utilisation de 0,3 valeur pour la fenêtre d'affichage sur l'iphone, mais de 0,7 pour ipad.

Est-il un moyen pour définir la fenêtre d'affichage pour que l'iphone ou l'ipad?

Si vous n'êtes pas satisfait des réponses que vous avez, s'il vous plaît commentaire sur eux afin que les gens peuvent essayer de les améliorer. Si vous êtes, acceptez l'un d'eux.
dans ce cas, pas de réponses ici, de répondre à l'OP de la question. Cela inclut votre propre réponse. Avant de demander à l'OP, pour répondre, à la re-lecture de la question : )

OriginalL'auteur Moon | 2011-01-24

iphone viewport

Ici est une solution...

<!-- in head -->
<meta id="viewport" name='viewport'>
<script>
    (function(doc) {
        var viewport = document.getElementById('viewport');
        if ( navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) {
            viewport.setAttribute("content", "initial-scale=0.3");
        } else if ( navigator.userAgent.match(/iPad/i) ) {
            viewport.setAttribute("content", "initial-scale=0.7");
        }
    }(document));
</script>

Je vois que vous êtes en utilisant une IIFE, l'expression de fonction wrapper être éliminés, et l'effet sera le même? Quel est l'avantage de la IIFE format dans ce cas?
Le IIFE est de gérer la portée du projet, de sorte que toutes les variables déclarées à l'intérieur de la IIFE ne pas polluer la portée globale (comme viewport)
Plus un pour un non-jQuery solution, même si je suis en utilisant jQuery. Je veux m'assurer que cela fonctionne dès que computerly possible.

OriginalL'auteur Ross

10

J'ai trouvé un moyen simple avec jQuery!

Ajouter à la <head> tag:
```
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<script>if ($(window).width() < 600) { $('meta[name=viewport]').attr('content','initial-scale=0.54, maximum-scale=0.54, user-scalable=no'); }</script>
```
La <meta> balise définit l'échelle par défaut et la <script> tag re-écrit la fenêtre d'affichage si l'écran de l'appareil largeur est inférieure à 600 pixels (je pense que tous les appareils de téléphone sont sous 600px).

Je ne pouvais pas trouver un solution simple n'importe où, alors je suis venu avec cela 🙂

L'iPhone initialement définit la largeur de la fenêtre à 960px.
Cela n'a pas fonctionné pour moi

OriginalL'auteur Sean
8

Veuillez noter, meta viewport est liste délimitée par des virgules, vous ne devriez pas utiliser des points-virgules.
```
<meta name = "viewport" content = "width = 320,
       initial-scale = 2.3, user-scalable = no">
```
Source:
fenêtre d'affichage de la syntaxe dans la documentation d'Apple et
La configuration de la Fenêtre d'affichage – article Apple

(Si j'avais plus de points de réputation, je voudrais ajouter un commentaire)

Maintenant que vous avez assez de réputation pour ajouter un commentaire 🙂
le lien est en bas
checked&mises à jour

OriginalL'auteur babca

Pour tous les appareils mobiles, essayer quelque chose comme cela.

<meta name="viewport" content="width=1024">
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
  if (/iphone|ipod|android|blackberry|opera mini|opera mobi|skyfire|maemo|windows phone|palm|iemobile|symbian|symbianos|fennec/i.test(navigator.userAgent.toLowerCase())) {
    $("meta[name='viewport']").attr("content", "width=640");
  }
</script>

OriginalL'auteur tim

3
Si vous avez besoin de définir différents viewport, basé sur la
appareil(iPhone/iPad), vous devez définir la fenêtre d'affichage à l'aide de device-width
```
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; width=device-width;">
```
Ce que cette déclaration est de définir une fenêtre d'affichage de 320px sur iPhone
et 768px sur l'iPad..Devine qui est ce woudld traduire en 0.3
et 0,7 u sont à la recherche pour..
Cela a fonctionné, mais seulement après j'ai réalisé que cette ligne ne pas aller dans la section...! Muette de moi, mais peut-être besoin d'être dit.

Merci!

OriginalL'auteur testndtv
0

Je ne suis pas sûr que vous pouvez définir une fenêtre d'affichage pour que l'iPhone, mais vous pouvez définir la requête des médias et donc le CSS pour que l'iPhone, je pense.

En paramètre de la requête de support pour un seul appareil de la largeur de l'iPhone (320x480) ou iPad (1024x768) vous pourriez peut-être obtenir ce que vous essayez pour.

OriginalL'auteur Jack Marchetti
0

Voir ma réponse ci-dessous sur la façon de définir dynamiquement votre initiale du zoom, de sorte que l'ensemble de votre site est un zoom correctement au chargement de la page (fonctionne pour toutes les tailles d'instrument).

Changement de la tablette de fenêtre d'affichage à exactement montrer fixe dimension de l'élément

OriginalL'auteur Osmaan Shah
0

Que le script de Tim qui utilise jquery semble bien fonctionner. Je l'ai changé un peu et il semble fonctionner pour moi. J'ai ajouté quelques paramètres échelle. Il m'a donné les résultats que j'ai besoin pour ma page s'affiche bien sur iphone et ipad. Voici ce que j'ai ajouté:
```
maximum-scale=2.0; user-scalable=1;
```
OriginalL'auteur John

Vous devez vous connecter pour publier un commentaire.