뷰포트 메타 태그로 최소 너비 달성

뷰포트 메타 태그로 최소 너비 달성

---

내 웹 페이지의 뷰포트 너비 가 device-width > 450px 또는 450px 인 한 device-width 와 같기를 원합니다 (내 레이아웃은 동적으로 크기가 조정되지만 450px 이하에서는 좋지 않습니다).

다음 두 메타 태그는 기기 너비가 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" />

그러나 휴대 전화 (예 : device-width = 320px)에서는 전자가 콘텐츠에 비해 너무 얇습니다. 후자는 브라우저를 확대하므로 사용자가 콘텐츠를 보려면 수동으로 축소해야합니다.

또는이 메타 태그는 휴대 전화에서 잘 작동합니다.

<meta name="viewport" content="width=450" />

그러나 태블릿에서 사용할 수있는 추가 너비를 활용하지 않습니다.

어떤 도움 / 아이디어라도 정말 감사하겠습니다 (차이가 생기면 GWT를 사용하고 있습니다).

---

따라서 viewport태그의 너비를 동적으로 변경하고 싶습니다 .

여기 있습니다 :

<meta id="myViewport" name="viewport" content="width = 380">
<script>
window.onload = function () {
    var mvp = document.getElementById('myViewport');
    mvp.setAttribute('content','width=580');
}
</script> 

참조 : http://www.quirksmode.org/mobile/tableViewport.html

---

이 시도:

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

나는 당신이 잘못된 방향을 가지고 있다고 생각하기 때문에 "initial-scale = 1"을 바꿨습니다. width = device-width 일 때 initial_scale을 1로 설정하여 페이지가 창에 정확히 맞도록합니다. 특정 뷰포트 너비를 설정할 때 초기 배율을 1로 설정하지 않을 수 있습니다 (그렇지 않으면 페이지가 확대되기 시작합니다).

---

@media 태그와 CSS를 사용하세요. 그것은 놀라운 일을합니다. 뷰 포트에 최소 너비를 제공하지는 않지만 선호되는 방법입니다.

뷰포트에 대해 수행하는 작업은 다음과 같습니다.

<meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=yes, minimum-scale=1.0, maximum-scale=2.0">

그런 다음 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;
    }

}

분명히 중간 크기도 가질 수 있습니다.

여기에 다른 예가 더 있습니다.

---

The JavaScript code given in the other answers doesn't work in Firefox, but it will work if you remove the meta tag and insert a new one.

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

Or just always insert it in 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>

---

For my sanity, I wrote a polyfill to just add a min-width attribute to the viewport meta tag:

Set min-width in viewport metatag

With this, you could just do:

<meta name="viewport" content="width=device-width, initial-scale=1.0, min-width=450" />
<script type="text/javascript" src="viewport-min-width.js"></script>

---

In short, there is no need to set min-width on viewport because you can set it on body or html element instead, to make them and their content wider than viewport. User will be able to scroll or zoom out content.

body {
  min-width: 450px;
}

I did some tests in Chrome for Android and it scales fonts of some elements up if viewport width is set to anything other than device-width. Also shrink-to-fit=yes is useful to have a page zoomed out initially.

Lastly, this approach supports desktop browsers that can have strange window sizes or current zoom settings (both of which affect reported viewport dimensions), but don't honor the viewport meta tag.

참고URL : https://stackoverflow.com/questions/15040408/achieving-min-width-with-viewport-meta-tag