Pourquoi ne pas en faire ma fenêtre d'affichage de la balise d'utiliser correctement l'appareil largeur (pas de zoom) sur la plupart des appareils mobiles?

Mise à JOUR 03/2019: Ce Q&A encore une certaine activité, près de 5 ans, ma question est venu. Veuillez noter que ce problème était dû en partie à la plus commune des irrégularités dans les anciens appareils mobiles à l'époque. Aujourd'hui, les navigateurs et les périphériques, de jongler avec la fenêtre d'affichage de l'évolutivité serait un chausse-pied correctif pour un problème qui est probablement un problème dans votre CSS ou, éventuellement, votre balisage.

J'ai construit une douzaine de sites responsive et n'ont jamais connu ce problème. En gros, je suis en utilisant la balise meta pour fenêtre avec width=device-width, mais les appareils iPhone et Android sont encore en zoomant. Pour une raison quelconque, je n'ai pas ce problème sur les téléphones Windows.

Voici un extrait de la tête html:

<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Voici le code HTML pour le principal wrappers (note ultrapériphériques div est ajouté à partir de jquery.mobile:

<body class="html front logged-in no-sidebars page-node mobile-detect-class ismobiledevice" >   
    <div data-role="page" data-url="/?mobile_switch=mobile" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 568px;">
        <div class="container">
        </div>  
    </div>
</body>

Et voici le principal wrapper CSS:

html,body { margin: 0; padding: 0; background-color: #d5d5d5; font-family: 'HelveticaNue', Arial; }
body {background: transparent none no-repeat 50% 0; min-height:100%; height:auto; background-size: auto 100%; width:auto;}

body > div {width: 100%; height: auto; }
.container { background: #fff none no-repeat 50% 0; margin-bottom: 20px; width:100%; position:relative;}

Bootstrap est également en cours de chargement avant de la feuille de style.

J'ai essayé un certain nombre de choses différentes, déjà, y compris:

  • Retrait de jquery.mobile
  • Retrait de bootstrap
  • Mise à jour des fichiers d'amorce de la dernière version
  • La modification de la balise fenêtre à la suivante:
    • width=device-width, initial-scale=1.0
    • width=device-width, initial-scale=1.0, user-scalable=no
    • width=device-width, initial-scale=1.0, user-scalable=0
    • width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0
  • Réglage de différentes propriétés CSS liées à la largeur/max-width

Je suis complètement à court d'idées et semblent avoir fait le tour de quelque chose de nouveau que je peux trouver /essayer par l'intermédiaire de google. J'apprécierais toute aide que vous pouvez fournir!

OriginalL'auteur Lawrence Johnson | 2014-02-12

  1. 8

    Après beaucoup d'essais et continué à chercher, j'ai trouvé une solution qui semble être très efficace. Une autre solution, j'ai vu un problème similaire a proposé ce qui suit:

    <meta name="viewport" content="width=640, initial-scale=.5, user-scalable=no" />

    Ce, au premier abord, semblait être une solution décente comme il a travaillé sur la plupart des téléphones. Il m'énerve un peu car il n'est évidemment pas spécifiquement orientés vers un travail avec n'importe quel appareil de largeur. Que la réponse se trouve ici:

    Android fenêtre d'affichage de réglage "user-scalable=no" pauses largeur /niveau de zoom de la fenêtre d'affichage

    Cette solution a travaillé sur la plupart des appareils mobiles, mais sur certains, il a été inefficace entraînant l'affichage incorrect de zoom.

    Je crois que la raison pour laquelle la solution ci-dessus n'est pas efficace parce que tous les appareils mobiles utiliser une base de 320 zoom. Alors, quand device-width n'est pas de travail, ce qui provoque des contraintes incompatibles.

    J'ai essayé un tas de choses différentes, mais alors à la fin essayé ce qui suit, qui (à ce jour) semble très efficace:

    <meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no">

    Je crois que la différence dans cette balise, c'est qu'il raconte l'appareil pour l'utiliser, il est natif de dimensions, mais ajoute alors un facteur d'échelle qui lui dit de ne pas zoomer comme beaucoup comme il le ferait normalement.

    Je n'ai jamais été capable de trouver un CSS ajustements qui a résolu le problème, et je souhaite la bienvenue à toutes les autres réponses que dans l'avenir peut ajouter d'autres précisions pour le problème/solution.

    Une autre chose que je voudrais ajouter, c'est qu'une variante de la balise meta qui peut être plus efficace pour les gros appareils (tablettes, dont le site de ce problème n'a pas été conçu pour), peut être de maximum de l'échelle au lieu de l'aide de l'utilisateur évolutive. Comme ceci:

    <meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5">

    MODIFIER /mettre à Jour 2018:

    Cette question devient encore tout à fait quelques visites, même si c'est un très vieux problème. Certes, avec le recul et après avoir beaucoup plus d'expérience avec sensible, je peux dire qu'à la fois le problème et les solutions ont été basées autour de cessez-le déficit résultant de mal construites responsive CSS et HTML.

    Même si les réponses ici peut aider les futurs visiteurs de résoudre des problèmes quand il s'agit de rétro-montage de plus en date code, je recommande fortement que tout nouveau développement conforme aux dernières normes adaptées. Si votre balisage et des CSS est conforme, il y a très peu de raisons pour lesquelles vous ne pourriez jamais le souhaitez pas que le standard de méta pour la fenêtre d'affichage en responsive (ci-dessous):

    <meta name="viewport" content="width=device-width, initial-scale=1">
    Le problème avec cette solution est que l'utilisateur ne peut pas zoomer plus (user-scalable=no;).
    Ce qui m'a aidé a: <meta name="viewport" content="width=device-width; initial-scale=1.0, maximum-scale=1.0; user-scalable=0;">

    OriginalL'auteur Lawrence Johnson

  2. 3

    J'ai juste enlevé initial-scale=1 et soudain Android sur Chrome et de Soie sur un Kindle à la fois fonctionne parfaitement, site de largeur correspondait à la largeur de l'écran dans les deux orientations.

    <meta name='viewport' content='width=device-width'>

    Je n'ai pas testé sur IOS, mais je vais ajouter un IOS spécifiques hack si j'en ai besoin.

    cela a fonctionné pour moi aussi

    OriginalL'auteur Geoff Kendall

  3. 0

    Vérifier cette réponse. En bref :

    <meta name="viewport" content="width=device-width; target-densityDpi=device-dpi;" />

    OriginalL'auteur Skippy le Grand Gourou

  4. 0

    De grandes Choses, cependant, j'ai découvert que si vous êtes sur un ordinateur de bureau et la fenêtre d'affichage est défini sur une largeur statique des milieux peut ne pas s'afficher sur les parties de l'écran n'affiche lorsque vous de défilement horizontale.

    De résoudre ce problème pour les non-réactif pages il suffit d'ajouter un min-width pour le corps.

    body {
    min-width: 960px;
}

    Remarque, c'est en outre le paramétrage de la fenêtre d'une largeur statique

    <meta name=viewport content="width=960">

    OriginalL'auteur jeremykenedy

  5. 0

    Toute personne à la recherche d'une solution dans l'avenir, séjour avec content="width=device-width, initial-scale=0.5" MAIS de régler le initial-scale= jusqu'à ce que cela fonctionne. J'ai construit un site qui a bien fonctionné sur différents moniteurs de résolution, mais a été absolument horrible sur mobile. Essayez de 0,5 ensuite mis à l'échelle vers le bas .1 à un moment jusqu'à ce qu'il fonctionne. Sur les deux téléphones Android 0.3 a fonctionné parfaitement pour moi.

    OriginalL'auteur user10729787

  6. 0

    J'ai eu un problème avec bootstrap 4.3.1 ressembler à une version réduite d'un comprimé sur les téléphones à l'aide de la balise meta de l'installation:

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    alors j'ai utilisé la balise meta ci-dessous pour le fixer sur le mobile:

    
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

    maintenant il ressemble à bootstrap 4 devrait ressembler à la croix appareil

    Vous pouvez avoir un coup d'oeil à bootstrap 4 du dispositif de la largeur de rupture par rapport à la largeur de l'appareil vous sont à l'essai sur. Je n'ai pas l'expérience de ce problème dans 4.3.1.
    Ok merci beaucoup je vais jeter un oeil

    OriginalL'auteur Donald Campan