Obtenir une largeur minimale avec la métabalise viewport

Question

Je voudrais que les pages de mon site web largeur de la fenêtre à égalité largeur du dispositif à condition que largeur du dispositif > 450px, ou 450px sinon (ma mise en page est mise à l'échelle de façon dynamique, mais elle n'a pas l'air bien en dessous de 450px de large).

Les deux balises méta suivantes fonctionnent bien sur les tablettes, où la largeur du dispositif est > 450px :

<!-- uses device width -->
<meta name="viewport" content="width=device-width" />

<!-- use of initial-scale means width param is treated as min-width -->
<meta name="viewport" content="width=450, initial-scale=1.0" />

Toutefois, sur les téléphones (où, par exemple, la largeur de l'appareil est de 320px), la première option est trop étroite pour le contenu, et la seconde entraîne un zoom avant dans le navigateur, de sorte que l'utilisateur doit dézoomer manuellement pour voir le contenu.

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

<meta name="viewport" content="width=450" />

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).

Answer 1

Donc vous voulez changer le viewport la largeur de la balise de façon dynamique.

Voilà :

<meta id="myViewport" name="viewport" content="width = 380">
<script>
window.onload = function () {
    var mvp = document.getElementById('myViewport');
    mvp.setAttribute('content','width=580');
}
</script> 

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

Answer 2

Essayez ça :

<meta id="vp" name="viewport" content="width=device-width, initial-scale=1">
<script>
window.onload = function() {
    if (screen.width < 450) {
        var mvp = document.getElementById('vp');
        mvp.setAttribute('content','user-scalable=no,width=450');
    }
}
</script>

Notez que j'ai interverti les initial-scale=1 car je pense que vous l'avez pris dans le mauvais sens. Vous voulez initial-scale à régler sur 1 quand width=device-width afin que la page s'adapte exactement à la fenêtre. Lorsque vous définissez une largeur de fenêtre spécifique, vous ne voulez pas définir la valeur 1 pour initial-scale (sinon la page commencera par un zoom avant).

Answer 3

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

<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
if (screen.width < 450){
    var viewport = document.querySelector("meta[name=viewport]");
    viewport.parentNode.removeChild(viewport);

    var newViewport = document.createElement("meta");
    newViewport.setAttribute("name", "viewport");
    newViewport.setAttribute("content", "width=450");
    document.head.appendChild(newViewport);
}
</script>

Ou alors, insérez-le toujours en JavaScript :

<script>
var viewport = document.createElement("meta");
viewport.setAttribute("name", "viewport");
if (screen.width < 450) {
    viewport.setAttribute("content", "width=450");
} else {
    viewport.setAttribute("content", "width=device-width, initial-scale=1");
}
document.head.appendChild(viewport);
</script>

---

Pour ma santé mentale, j'ai écrit un polyfill pour simplement ajouter un min-width à la métabalise viewport :

Définir la largeur minimale dans le métatag de la fenêtre d'affichage

Avec ça, vous pourriez juste faire :

<meta name="viewport" content="width=device-width, initial-scale=1.0, min-width=450" />
<script type="text/javascript" src="viewport-min-width.js"></script>

Answer 4

Utiliser une balise @media et du css. Cela fonctionne à merveille. Bien qu'il ne fournisse pas une largeur minimale au port d'affichage, il s'agit de la meilleure façon de procéder.

Voici ce que je fais pour le viewport :

<meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=yes, minimum-scale=1.0, maximum-scale=2.0">

Ensuite, j'ajuste la taille du panneau attaché au viewPort :

@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;
    }

}

Évidemment, vous pouvez aussi avoir des tailles intermédiaires...

voici un autre exemple

Answer 5

En bref, il n'est pas nécessaire de définir la largeur minimale sur le viewport car vous pouvez la définir sur body ou html afin de les rendre, ainsi que leur contenu, plus larges que la fenêtre d'affichage. L'utilisateur pourra faire défiler ou dézoomer le contenu.

body {
  min-width: 450px;
}

J'ai effectué quelques tests dans Chrome pour Android et j'ai constaté que les polices de certains éléments sont mises à l'échelle si la largeur de la fenêtre d'affichage n'est pas définie comme suit device-width . Aussi shrink-to-fit=yes est utile pour avoir une page dézoomée au départ.

Enfin, cette approche prend en charge les navigateurs de bureau qui peuvent avoir des tailles de fenêtre étranges ou des paramètres de zoom actuels (qui affectent tous deux les dimensions de la fenêtre d'affichage), mais qui ne respectent pas la métabalise viewport.