Comment redimensionner la page pour l'adapter à Windows en utilisant Meta Viewport?

Comment redimensionner la page pour l'adapter à Windows en utilisant Meta Viewport? Ceci est mon code. Je ne montre pas sur jsfiddle parce que jsfiddle n'approuve pas l'utilisation de meta tag.Comment redimensionner la page pour l'adapter à Windows en utilisant Meta Viewport?

<head> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no" /> 
<style> 
[email protected] { 
    width: device-width; 
    initial-scale: 1; 
    zoom: 1; 
    min-zoom: 1; 
    max-zoom: 3; 
    user-zoom: fixed; 
} 
@viewport { 
    width: device-width; 
    initial-scale: 1; 
    zoom: 1; 
    min-zoom: 1; 
    max-zoom: 3; 
    user-zoom: fixed; 
} 
</style> 
</head> 
<body style="overflow:hidden; margin:0"> 
    <div id="main"> 
     <div id="content" style=" text-align: center; "> 
      <img src="http://i.imgur.com/vgz0PDe.png"> 
      <img src="http://i.imgur.com/vgz0PDe.png"> 
      <img src="http://i.imgur.com/vgz0PDe.png"> 
      <img src="http://i.imgur.com/vgz0PDe.png"> 
      <img src="http://i.imgur.com/vgz0PDe.png"> 
      <img src="http://i.imgur.com/vgz0PDe.png"> 
      <img src="http://i.imgur.com/vgz0PDe.png"> 
      <img src="http://i.imgur.com/vgz0PDe.png"> 
      <img src="http://i.imgur.com/vgz0PDe.png"> 
      <img src="http://i.imgur.com/vgz0PDe.png"> 
      <img src="http://i.imgur.com/vgz0PDe.png"> 
      <img src="http://i.imgur.com/vgz0PDe.png"> 
      <img src="http://i.imgur.com/vgz0PDe.png"> 
      <img src="http://i.imgur.com/vgz0PDe.png"> 
      <img src="http://i.imgur.com/vgz0PDe.png"> 
      <img src="http://i.imgur.com/vgz0PDe.png"> 
      <img src="http://i.imgur.com/vgz0PDe.png"> 
      <img src="http://i.imgur.com/vgz0PDe.png"> 
     </div> 
     <div id="footer"> 
     </div> 
    </div> 
</body>

Quand je test sur résolution 1280 x 800 px il est montrer http://i.imgur.com/nzmWQO2.png

Et puis-je tester sur 800 x 600 px il est montrer http://i.imgur.com/2CqqVil.png

Mais résolution 800 x 600 px i vouloir montrer http://i.imgur.com/hwaoql6.png

Comment puis-je faire avec Meta Viewport?

Source

2016-09-17 peat wedty

Vous ne pouvez pas utiliser les requêtes multimédias? –

On dirait que vous voulez peut-être une largeur de fenêtre fixe de 800px si vous voulez conserver la même apparence mais juste redimensionnée. De mémoire cela peut provoquer un comportement incohérent sur certains navigateurs/périphériques donc une approche CSS pure comme les requêtes média (comme M. Lister suggéré est généralement une bien meilleure solution)

Si vous voulez essayer de régler la largeur de la fenêtre peut être fait en définissant l'attribut width sur votre balise META viewport:

<meta name="viewport" content="width=800, initial-scale=1.0, minimum-scale=1.0, user-scalable=no" />

Source

2016-09-17 06:16:01 Brian

Comment redimensionner la page pour l'adapter à Windows en utilisant Meta Viewport?

Répondre

Questions connexes