Atteindre la min-width avec la balise META viewport

Je voudrais que la largeur de la fenêtre de ma page Web soit égale à la largeur du périphérique aussi longtemps que la largeur du périphérique > 450 pixels, ou 450 pixels sinon (ma mise en page évolue dynamicment, mais pas au-dessous de 450 pixels).

Les deux balises META suivantes fonctionnent bien sur les tablettes, où la largeur du périphérique> 450px:

    

cependant, sur les téléphones (par exemple, device-width = 320px), le premier est trop fin pour le contenu; et le second provoque le zoom avant, de sorte que l’utilisateur doit effectuer un zoom arrière pour voir le contenu.

Alternativement, cette balise meta fonctionne bien sur les téléphones

  

mais ne profite pas de la largeur supplémentaire disponible sur les tablettes.

Toute aide / idée serait vraiment appréciée (et si cela fait une différence, j’utilise GWT).

Donc, vous voulez changer la largeur de la balise de la viewport dynamicment.

Voici :

   

Voir: http://www.quirksmode.org/mobile/tableViewport.html

Essaye ça:

   

Notez que j'ai échangé "l’échelle initiale = 1", car je pense que vous l’avez mal vue. Vous voulez que initial_scale soit défini sur 1 lorsque width = device-width, de sorte que la page corresponde exactement à la fenêtre. Lorsque vous définissez une largeur de fenêtre spécifique, vous ne souhaitez pas définir l'échelle initiale sur 1 (sinon la page commence à zoomer).

utilisez un tag @media et css. Cela fonctionne à merveille. Bien qu’il ne fournisse pas une largeur minimale au port d’affichage, c’est la méthode à privilégier.

Voici ce que je fais pour la fenêtre d’affichage:

  

Ensuite, je règle la taille du panneau associé à la vuePort:

 @media all and (max-width: 1024px) { /*styles for narrow desktop browsers and iPad landscape */ .myContentPanel{ width: 450; } } @media all and (max-width: 320px) { /*styles for iPhone/Android portrait*/ .myContentPanel { width: 320; } } 

De toute évidence, vous pouvez aussi avoir des tailles intermédiaires …

voici plus dans un autre exemple

Le code JavaScript donné dans les autres réponses ne fonctionne pas dans Firefox, mais il fonctionnera si vous supprimez la balise META et en insérez une nouvelle.

   

Ou insérez-le toujours en JavaScript:

  

Pour ma santé mentale, j'ai écrit un polyfill pour append un atsortingbut min-width à la balise meta viewport:

Définir min-width dans la fenêtre d'affichage metatag

Avec ceci, vous pourriez juste faire:

   

En résumé, il n’est pas nécessaire de définir min-width sur viewport, car vous pouvez le définir sur body ou html element pour les rendre, ainsi que leur contenu, plus larges que viewport. L’utilisateur pourra faire défiler ou zoomer le contenu.

 body { min-width: 450px; } 

J’ai fait des tests dans Chrome pour Android et il a mis à niveau les fonts de certains éléments si la largeur de la fenêtre d’affichage est définie sur autre chose que la device-width . De même, shrink-to-fit=yes est utile pour avoir une page agrandie au départ.

Enfin, cette approche prend en charge les navigateurs de bureau qui peuvent avoir des tailles de fenêtre ou des parameters de zoom actuels (qui affectent tous deux les dimensions de la fenêtre signalée), mais ne respectent pas la balise meta de la fenêtre d’affichage.