[html] Atteindre min-width avec la balise META viewport



Answers

Essaye ç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 échangé le "initial-scale = 1", car je pense que vous l'avez eu à l'envers. Vous voulez que initial_scale soit mis à 1 quand width = device-width, de sorte que la page s'adapte exactement dans la fenêtre. Lorsque vous définissez une largeur de fenêtre spécifique, vous ne voulez pas définir l'échelle initiale sur 1 (sinon la page commencera à zoomer).

Question

Je souhaite que la largeur de la fenêtre d' affichage de ma page Web soit égale à la largeur du périphérique tant que device-width > 450px, ou 450px sinon (ma disposition est mise à l'échelle de manière dynamique, mais ne semble pas bonne en dessous de 450px).

Les deux balises méta suivantes fonctionnent bien sur les tablettes, où la largeur de l'appareil> 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" />

cependant, sur les téléphones (où par exemple device-width = 320px) le premier est trop mince pour le contenu; et ce dernier fait zoomer le navigateur, l'utilisateur doit donc faire un zoom arrière pour voir le contenu.

Alternativement, 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ées serait vraiment appréciée (et si cela fait une différence, j'utilise GWT).




Le code JavaScript donné dans les autres réponses ne fonctionne pas dans Firefox, mais il fonctionnera si vous supprimez la balise META et insérez-en 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 insérez-le simplement 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 ajouter juste un attribut min-width à la balise meta viewport:

Définir la largeur minimale dans la fenêtre d'affichage

Avec cela, vous pouvez simplement 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>



Related