방향 변경 후 javascript 최대 뷰포트 높이 Android 및 iOS


1 Answers

iOS 시뮬레이터에서 반환되는 예상 값입니다. 나는 지금 안드로이드를 테스트 할 수 없다.

var supportsOrientationChange = "onorientationchange" in window;
var orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.onload = updateOrientation();

window.addEventListener(orientationEvent, function() {
    updateOrientation();
}, false);

function updateOrientation(){
    switch(window.orientation){
    case 0:
    alert(window.outerHeight); // Returns '356' with browser chrome
    break;

    case -90:
    alert('Landscape right');
    break;

    case 90:
    alert(window.outerHeight); // Returns '208' w browser chrome
    break;

    case 180:
    //alert('Portrait view - upside down');
    break;
    }
    var orientation = (window.orientation);
}

(참고 :이 코드는 브라우저에서 테스트하지 않습니다.)

javascript android html ios mobile

목표:

address bar 의 공백을 포함하여 장치의 최대 뷰포트 높이를 찾으려면 최소 본문의 크기를 동적으로 조정하고 내용을 위로 올려야합니다.

문제 :

모바일 브라우저는 방향 상태를 다르게 처리하고 방향 변경시 DOM 속성을 다르게 업데이트합니다.

자바 스크립트로 브라우저에서 Android 휴대 전화의 회전 감지

안드로이드 폰에서는 screen.width 또는 screen.height 도 장치 회전에 따라 업데이트됩니다.

|==============================================================================|
|     Device     | Events Fired      | orientation | innerWidth | screen.width |
|==============================================================================|
| iPad 2         | resize            | 0           | 1024       | 768          |
| (to landscape) | orientationchange | 90          | 1024       | 768          |
|----------------+-------------------+-------------+------------+--------------|
| iPad 2         | resize            | 90          | 768        | 768          |
| (to portrait)  | orientationchange | 0           | 768        | 768          |
|----------------+-------------------+-------------+------------+--------------|
| iPhone 4       | resize            | 0           | 480        | 320          |
| (to landscape) | orientationchange | 90          | 480        | 320          |
|----------------+-------------------+-------------+------------+--------------|
| iPhone 4       | resize            | 90          | 320        | 320          |
| (to portrait)  | orientationchange | 0           | 320        | 320          |
|----------------+-------------------+-------------+------------+--------------|
| Droid phone    | orientationchange | 90          | 320        | 320          |
| (to landscape) | resize            | 90          | 569        | 569          |
|----------------+-------------------+-------------+------------+--------------|
| Droid phone    | orientationchange | 0           | 569        | 569          |
| (to portrait)  | resize            | 0           | 320        | 320          |

이 때문에 어떤 방향이든 관계없이 최대 뷰포트 높이를 찾는 것이 단일 장치를 사용하여 장치의 최대 높이를 반환하는 것은 장치 범위에 대해 일정하지 않습니다.

이 두 가지를 훌륭하게 만들어주지 않는 다른 문제들 :

  • window.devicePixelRatio 속성은 window.outerHeight 나눌 때 일관성없는 높이를 반환 할 수 있습니다.
  • 지연 window.setTimeout(function() {}, time) 은 오리엔테이션 변경 후 DOM 요소에 업데이트 기회를 제공하는 데 사용해야합니다.
  • iOS 기기의 방향 변경시 window.outerHeight 가 업데이트되지 않습니다. screen.availHeight 으로 screen.availHeight 을 사용하면 전체 높이와 같은 하단 탐색 막대가 포함됩니다.
  • #header , #content , #footer 구조체를 사용하면 #content{min-height} 를 동적으로 다시 계산하여 body 가 다이나믹하게 업데이트 될 때 #footer 를 푸시 다운시킵니다.

해결책 :

먼저 DIV 구조를 살펴 보겠습니다.

<style>
#header,#content,#footer{width:100%;}
</style>

<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>

기기가 자체적으로 확장하지 못하도록하고 싶습니다.

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

최대 뷰포트 높이를 반환하고 iOS 용 주소 표시 줄을 숨기는 기능이 필요합니다.

<script src="iOS.js" type="text/javascript"></script>

http://iosjs.com/

그런 다음 기기가 방향 변경을 지원하는지 확인하고 크기 변경을 폴백으로 사용합니다.

var iOS = (navigator.userAgent.match(/(iPad|iPhone|iPod)/i) ? true : false);
var android = (navigator.userAgent.match(/Android/i) ? true : false);
var supportsOrientationChange = "onorientationchange" in window;
var orientationEvent = supportsOrientationChange ? "orientationchange" : "resize"; 

짐승의 배 :

function updateOrientation()
{
    var orientation = (window.orientation);

    if(android)
    {
        window.setTimeout(function() {
            window.scrollTo(0,0);
            var size = window.outerHeight/window.devicePixelRatio;
            $('body').css('min-height', size + 'px');
            var headerHeight = $('#header').height();
            var footerHeight = $('#footer').height();
            var contentHeight = size - (headerHeight+footerHeight);
            $('#content').css('min-height', contentHeight + 'px');
            window.scrollTo(0,1);
        }, 200);
    }

    if(iOS)
    {
        window.setTimeout(function(){
            window.scrollTo(0,0);
            var size = iOS_getViewportSize();
            var headerHeight = $('#header').height();
            var footerHeight = $('#footer').height();
            var contentHeight = size.height - (headerHeight+footerHeight);
            $('#content').css('min-height', contentHeight + 'px');
            window.scrollTo(0,1);
        }, 0);
    }
}

페이지로드 및 방향 이벤트에 대한 이벤트 리스너를 추가하십시오.

if(iOS)
{
    iOS_addEventListener(window, "load", iOS_handleWindowLoad);
    iOS_addEventListener(window, "orientationchange", iOS_handleOrientationChange);
    iOS_addEventListener(window, "resize", iOS_handleReize);
}
addEventListener("load", function() 
{
    updateOrientation();
}, false);
addEventListener(orientationEvent, function() {
    updateOrientation();
}, false);

증명은 푸딩에 있습니다 :

iPhone 4 & 4s 초상화 & 풍경

Android 인물 및 풍경

여기서의 목표는이 솔루션을 축소하거나 더 나은 것으로 만드는 것입니다.



Related