html <meta - Atteindre min-width avec la balise META viewport





name="viewport" content="width=device-width"> (5)


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>

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




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




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 préférée.

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

<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 avoir des tailles intermédiaires aussi ...

voici plus dans un autre exemple




Vous voulez donc modifier dynamiquement la largeur de la balise viewport.

Voici :

<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




Funny beahviour, quand la transparence est désactivée. Même en jpg, il montre cet artefact. Ressemble à un bogue dans le moteur de rendu webkit.





html gwt media-queries meta