2016-09-17 5 views
0

Как изменить размер страницы в соответствии с окнами с помощью мета-видового экрана? Это мой код. Я не показываюсь на jsfiddle, потому что jsfiddle не одобряет использование метатега.Как изменить размер страницы в соответствии с окнами с помощью мета-видового экрана?

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

Когда я проверить на 1280 х 800 разрешения рха это показать http://i.imgur.com/nzmWQO2.png

А потом я проверить на 800 х 600 пикселей рха это показать http://i.imgur.com/2CqqVil.png

Но на 800 х 600 пикселей рха я хочу показать http://i.imgur.com/hwaoql6.png

Как я могу сделать с метафоном?

+1

Вы не можете использовать медиа-запросы? –

ответ

0

Похоже, возможно, вам нужна фиксированная ширина экрана 800 пикселей, если вы хотите, чтобы она выглядела одинаково, но просто масштабировалась. Из памяти это может привести к некорректному поведению на некоторых браузерах/устройствах, поэтому чистый CSS-подход, такой как медиа-запросы (как предложил г-н Листер, как правило, является гораздо лучшим решением)

Если вы хотите попробовать установить ширину видового экрана, это можно сделать путем установки атрибута width в метатеге вашего вида просмотра:

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