메타 뷰포트를 사용하여 창에 맞게 페이지의 크기를 조정하는 방법은 무엇입니까?

메타 뷰포트를 사용하여 창에 맞게 페이지의 크기를 조정하는 방법은 무엇입니까? 이것은 내 코드입니다. jsfiddle는 메타 태그를 사용하지 않기 때문에 jsfiddle에 표시하지 않습니다. 내가 1280 X 800 픽셀 해상도에서 테스트 할 때메타 뷰포트를 사용하여 창에 맞게 페이지의 크기를 조정하는 방법은 무엇입니까?

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

는 http://i.imgur.com/nzmWQO2.png

을 보여입니다 그리고 난 800 × 600 픽셀 해상도에서 테스트가 보여 http://i.imgur.com/2CqqVil.png

이다 그러나 800 × 600 픽셀 해상도에 난 표시하고 싶습니다 http://i.imgur.com/hwaoql6.png

어떻게 메타 뷰포트를 사용할 수 있습니까?

출처

2016-09-17 peat wedty

미디어 쿼리를 사용할 수 없습니까? –

같은 모양을 유지하려는 경우 800px의 고정 된 뷰포트 너비가 필요할 수도 있습니다. 메모리에서 이로 인해 일부 브라우저/장치에서 일관되지 않은 동작이 발생할 수 있으므로 미디어 쿼리와 같은 순수 CSS 방식 (대개 Lister의 제안에 따르면 훨씬 좋은 해결책)

뷰포트 너비 설정을 시도하려면 뷰포트 메타 태그에 width 속성을 설정하여 다음을 수행 할 수 있습니다.

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

출처

2016-09-17 06:16:01 Brian

메타 뷰포트를 사용하여 창에 맞게 페이지의 크기를 조정하는 방법은 무엇입니까?

답변

관련 문제