회전을 제대로 처리하는 아이폰용 뷰포트 메타를 설정하는 방법은?

회전을 제대로 처리하는 아이폰용 뷰포트 메타를 설정하는 방법은?

그래서 저는 다음을 사용해 왔습니다.

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

내 HTML 콘텐츠가 아이폰에 잘 표시되도록 하기 위해서입니다.사용자가 디스플레이가 320px로 제한된 상태로 유지되는 가로 모드로 장치를 회전할 때까지 작동합니다.

사용자가 장치 방향을 변경하는 것에 따라 변경되는 뷰포트를 지정하는 간단한 방법이 있습니까?아니면 그것을 처리하기 위해 자바스크립트에 의존해야 합니까?

저는 이 문제를 해결하기 위해 노력하고 있었고, 제가 생각해낸 해결책은 다음과 같습니다.

<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

• 삼성 은하
• 삼성 갤럭시 s2
• 삼성 갤럭시 노트 (그러나 css를 800px로 변경해야 했습니다 [아래 참조]*)
• 모토로라

• 아이폰 4

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

이것은 모바일 개발과 함께 거대한 립포워드입니다...

저도 이 문제가 있었고, 둘 다 너비를 설정하고, 회전할 때 업데이트하고, 사용자가 페이지를 확대/축소할 수 있도록 하고 싶었습니다(현재 답변은 첫 번째를 제공하지만, 부작용으로 나중을 방지함).그래서 저는 방향에 맞게 뷰 폭을 정확하게 유지하면서도 매우 직선적이지는 않지만 확대/축소가 가능한 수정을 고안했습니다.

먼저 다음 Javascript를 표시 중인 웹 페이지에 추가합니다.

 <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)에서 회전했습니다.인터페이스 방향:(UI 인터페이스 방향) 위치인터페이스 방향 메서드, 추가:

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

또한 JS 리스너를 한 크기로 조정하거나 다른 크기로 조정할 수도 있지만, 코코아 터치 UI 프레임워크에서 조정할 때는 효과가 있었습니다.

이것이 누군가에게 도움이 되기를 바랍니다 :)

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

모든 아이폰, 모든 아이패드, 모든 안드로이드를 지원합니다.

공유하고 싶습니다. 반응성이 뛰어난 디자인을 위해 뷰포트 설정을 사용했습니다. Max 스케일을 0.8로, 초기 스케일을 1로, 아니요로 설정하면 세로 모드에서 가장 작은 뷰와 가로 보기를 사용할 수 있습니다.D...이것은 적절하게 추악한 해킹이지만 효과가 있는 것 같습니다, 왜 그런지 모르겠어요, 그래서 저는 그것을 사용하지 않을 것이지만, 흥미로운 결과입니다.

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

즐기세요 :)

사용자가 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