회전을 올바르게 처리하는 iPhone의 뷰포트 메타를 설정하는 방법은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/1230019

  •  22-07-2019
  •  | 
  •  

문제

그래서 나는 사용하고있다 :

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

나는 크로스 플랫폼에서 작동 해야하는 끔찍하게 다른 접근법을 생각해 냈습니다.

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

지금까지 나는 테스트를 거쳤다

삼건 갤럭시 2

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

  • 아이폰 4

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

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

확장 할 수 없도록 설정하고 (최대 규모 = 초기 규모) 조경 모드로 회전 할 때 확장 할 수 없습니다. 최대 규모 = 1.6을 설정하면 조경 모드에 맞게 올바르게 확장됩니다.

나는이 문제를 직접했고, 둘 다 너비를 설정하고 회전에서 업데이트하고 사용자가 페이지를 확장하고 축소 할 수 있도록하고 싶었습니다 (현재 답변은 첫 번째를 제공하지만 나중에 부작용으로 방지합니다. ) .. 그래서 나는 뷰 너비를 방향에 적합하게 유지하는 수정을 내놓았지만 여전히 확대 / 확대를 허용하지만 매우 간단하지는 않습니다.

먼저 표시중인 웹 페이지에 다음 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) didrotatefrominterfaceorientation : (uiinterfaceorientation)의 interfaceorientation 메소드에서 다음 :

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/webmas .htm

또한, 나는 당신이 onresize를 위해 JS 리스너를 넣을 수 있다는 것을 이해하지만, 구조를 트리거하는 것을 좋아하는 것을 이해하지만, 이것은 Cocoa Touch UI 프레임 워크에서 그것을하고있는 동안 저에게 효과적이었습니다.

이것이 누군가를 돕기를 바랍니다 :)

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

모든 iPhone, 모든 iPad, 모든 안드로이드를 수퍼 포트합니다.

공유하고 싶을 때, 나는 반응 형 디자인의 뷰포트 설정을 가지고 놀았습니다. 최대 스케일을 0.8로 설정하면 초기 스케일을 1으로 1로, 스케일 가능하게는 초상화 모드와 iPad View에서 가장 작은보기를 얻습니다. Landscape : 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);
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top