회전을 제대로 처리하는 iPhone 용 뷰포트 메타를 설정하는 방법은 무엇입니까?

회전을 제대로 처리하는 iPhone 용 뷰포트 메타를 설정하는 방법은 무엇입니까?

---

그래서 나는 사용하고 있습니다.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>

내 HTML 콘텐츠를 iPhone에 멋지게 표시 할 수 있습니다. 사용자가 기기를 가로 모드로 회전 할 때까지 훌륭하게 작동하며 디스플레이는 320px로 제한됩니다.

사용자가 장치 방향을 변경함에 따라 변경되는 뷰포트를 지정하는 간단한 방법이 있습니까? 아니면 Javascript에 의존하여 처리해야합니까?

---

이 문제를 직접 해결하려고했는데 내가 생각 해낸 해결책은 다음과 같습니다.

<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />

이것은 방향에 관계없이 장치를 1.0 스케일로 고정하는 것 같습니다. 그러나 부작용으로 사용자 스케일링을 완전히 비활성화합니다 (핀치 확대 / 축소 등).

---

여전히 관심있는 사람 :

http://wiki.phonegap.com/w/page/16494815/Preventing-Scrolling-on-iPhone-Phonegap-Applications

페이지에서 :

<meta name="viewport" content="user-scalable=no,width=device-width" />

이렇게하면 Safari가 사용자가 "핀치"제스처로 페이지를 확대하지 못하도록 지시하고 뷰 포트의 너비를 iPhone의 방향에 관계없이 화면 너비로 고정합니다.

---

도움이된다면 사용자 확장 옵션을 잃고 싶지 않습니다. 나는 여기 에서이 JS 솔루션을 좋아한다 .

<script type="text/javascript">
(function(doc) {

    var addEvent = 'addEventListener',
        type = 'gesturestart',
        qsa = 'querySelectorAll',
        scales = [1, 1],
        meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : [];

    function fix() {
        meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1];
        doc.removeEventListener(type, fix, true);
    }

    if ((meta = meta[meta.length - 1]) && addEvent in doc) {
        fix();
        scales = [.25, 1.6];
        doc[addEvent](type, fix, true);
    }

}(document));
</script>

---

크기를 조정할 수 없도록 설정하고 있으므로 (최대 크기 = 초기 크기) 가로 모드로 회전 할 때 크기를 늘릴 수 없습니다. maximum-scale = 1.6을 설정하면 가로 모드에 맞게 적절하게 확장됩니다.

---

교차 플랫폼에서 작동해야하는 약간 다른 접근 방식을 생각해 냈습니다.

http://www.jqui.net/tips-tricks/fixing-the-auto-scale-on-mobile-devices/

지금까지 테스트했습니다.

삼선 갤럭시 2

• 삼성 갤럭시 S
• 삼성 갤럭시 S2
• 삼성 갤럭시 노트 (하지만 css를 800px로 변경해야 함 [아래 참조] *)
• Motorola

• 아이폰 4

  • @media screen and (max-width:800px) {

이것은 모바일 개발에 대한 엄청난 립 포워드입니다 ...

---

나는이 문제를 직접 겪었고 너비를 설정하고 회전시 업데이트하고 사용자가 페이지의 크기를 조정하고 확대 할 수 있기를 원했습니다 (현재 답변은 첫 번째를 제공하지만 나중에는 부작용으로 방지합니다 ) .. 그래서 나는보기 너비를 방향에 맞도록 유지하면서도 줌잉을 허용하는 수정을 내놓았습니다.

먼저 표시중인 웹 페이지에 다음 자바 스크립트를 추가하세요.

 <script type='text/javascript'>
 function setViewPortWidth(width) {
  var metatags = document.getElementsByTagName('meta');
  for(cnt = 0; cnt < metatags.length; cnt++) { 
   var element = metatags[cnt];
   if(element.getAttribute('name') == 'viewport') {

    element.setAttribute('content','width = '+width+'; maximum-scale = 5; user-scalable = yes');
    document.body.style['max-width'] = width+'px';
   }
  }
 }
 </script>

그런 다음-(void) didRotateFromInterfaceOrientation : (UIInterfaceOrientation) fromInterfaceOrientation 메서드에 다음을 추가합니다.

float availableWidth = [EmailVC webViewWidth];
NSString *stringJS;

stringJS = [NSString stringWithFormat:@"document.body.offsetWidth"];
float documentWidth = [[_webView stringByEvaluatingJavaScriptFromString:stringJS] floatValue];

if(documentWidth > availableWidth) return; // Don't perform if the document width is larger then available (allow auto-scale)

// Function setViewPortWidth defined in EmailBodyProtocolHandler prepend
stringJS = [NSString stringWithFormat:@"setViewPortWidth(%f);",availableWidth];
[_webView stringByEvaluatingJavaScriptFromString:stringJS];

뷰 포털 콘텐츠 설정을 더 수정하여 추가 조정을 수행 할 수 있습니다.

http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-Tags.htm

Also, I understand you can put a JS listener for onresize or something like to trigger the rescaling, but this worked for me as I'm doing it from Cocoa Touch UI frameworks.

Hope this helps someone :)

---

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">

suport all iphones, all ipads, all androids.

---

just want to share, i've played around with the viewport settings for my responsive design, if i set the Max scale to 0.8, the initial scale to 1 and scalable to no then i get the smallest view in portrait mode and the iPad view for landscape :D... this is properly an ugly hack but it seems to work, i don't know why so i won't be using it, but interesting results

<meta name="viewport" content="user-scalable=no, initial-scale = 1.0,maximum-scale = 0.8,width=device-width" />

enjoy :)

---

Why not just reload the page when the user rotates the screen with javascript

function doOnOrientationChange()
{
location.reload();
}

window.addEventListener('orientationchange', doOnOrientationChange);

참고URL : https://stackoverflow.com/questions/1230019/how-to-set-viewport-meta-for-iphone-that-handles-rotation-properly