web-dev-qa-db-fra.com

Atteindre min-width avec la balise meta de viewport

Je voudrais que ma page Web largeur de la fenêtre d'affichage soit égale à largeur de périphérique aussi longtemps que largeur de périphérique> 450px, ou 450px sinon (ma mise en page est mise à l'échelle de manière dynamique , mais ne semble pas bon en dessous de 450px large).

Les deux balises META suivantes fonctionnent bien sur les tablettes, où la largeur de périphérique> 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, device-width = 320px), le premier est trop mince pour le contenu; et ce dernier force le navigateur à effectuer un zoom avant, si bien que l'utilisateur doit effectuer un zoom arrière manuellement pour afficher 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ée serait vraiment appréciée (et si cela fait une différence, j'utilise GWT).

htmlgwtmedia-queriesmeta
58
Tom G

Vous voulez donc changer la largeur de la balise viewport de manière dynamique.

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.quirks mode.org/mobile/tableViewport.html

37
Suresh Atta

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 mal tourné. Vous voulez que initial_scale soit défini sur 1 lorsque width = device-width, afin que la page tienne exactement dans la fenêtre. Lorsque vous définissez une largeur de fenêtre d'affichage spécifique, vous ne souhaitez pas définir l'échelle initiale sur 1 (sinon, la page démarrera avec un zoom avant).

16
CpnCrunch

utilisez un tag @media et css. Cela fonctionne à merveille. Bien qu'il ne fournisse pas une largeur minimale au port de visualisation, il s'agit du moyen préféré.

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é à 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 plus dans un autre exemple

5
user1258245

Le code JavaScript donné dans les autres réponses ne fonctionne pas dans Firefox, mais cela 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 tout simplement toujours l'insérer 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 n’ajouter qu’un min-width attribut à la balise méta viewport:

Définir min-width dans la métabalise de viewport

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>
3
Brendan Long

En bref, il n'est pas nécessaire de définir min-width sur viewport car vous pouvez le définir sur l'élément body ou html, pour les rendre plus larges que viewport. L'utilisateur pourra faire défiler ou réduire le contenu.

body {
  min-width: 450px;
}

J'ai fait quelques tests avec Chrome pour Android et les polices de certains éléments sont redimensionnées si la largeur de la fenêtre d'affichage est définie sur autre chose que device-width. Également shrink-to-fit=yes est utile d’avoir initialement un zoom arrière sur une page.

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 les dimensions de la fenêtre d'affichage rapportées), mais n'honorent pas la balise méta de la fenêtre d'affichage.

1
Andrew Svietlichnyy