방향이 세로 디스플레이 경고 메시지 인 경우 사용자에게 지침을 제공하는 경우 뷰포트 방향 감지

모바일 장치 전용 웹 사이트를 만들고 있습니다. 가로 모드에서 가장 잘 보이는 페이지가 하나 있습니다.

해당 페이지를 방문한 사용자가 세로 모드에서 페이지를보고 있는지 감지하고, 그렇다면 가로 모드에서 페이지를 가장 잘 볼 수 있다는 메시지를 표시합니까? 사용자가 가로 모드에서 이미보고있는 경우 메시지가 나타나지 않습니다.

기본적으로 사이트가 뷰포트 방향을 감지하고 방향이 세로 인 경우이 페이지가 가로 모드 에서 가장 잘 보인다는 경고 메시지를 표시 합니다.

if(window.innerHeight > window.innerWidth){
    alert("Please use Landscape!");
}

jQuery Mobile에는이 속성의 변경을 처리하는 이벤트가 있습니다. 누군가가 나중에 회전하면 경고하려면- orientationchange

또한 인터넷 검색 후 체크 아웃하십시오 window.orientation(도 단위로 측정된다고 생각합니다 ...)

window.matchMediaCSS 구문과 매우 유사하므로 사용하고 선호하는을 사용할 수도 있습니다 .

if (window.matchMedia("(orientation: portrait)").matches) {
   // you're in PORTRAIT mode
}

if (window.matchMedia("(orientation: landscape)").matches) {
   // you're in LANDSCAPE mode
}

iPad 2에서 테스트되었습니다.

David Walsh는 더 나은 지점 접근 방식을 가지고 있습니다.

// Listen for orientation changes
window.addEventListener("orientationchange", function() {
  // Announce the new orientation number
  alert(window.orientation);
}, false);

이러한 변경 중에 window.orientation 속성이 변경 될 수 있습니다. 값이 0이면 세로보기를 의미하고, -90은 장치가 오른쪽으로 가로로 회전했음을 의미하고 90은 장치가 왼쪽으로 가로로 회전되었음을 의미합니다.

http://davidwalsh.name/orientation-change

CSS3을 사용할 수 있습니다 :

@media screen and (orientation:landscape)
{
   body
   {
      background: red;
   }
}

예를 들어 몇 가지 방법이 있습니다.

• 검사 window.orientation값
• 비교 innerHeight대innerWidth

아래 방법 중 하나를 적용 할 수 있습니다.

기기가 세로 모드인지 확인

function isPortrait() {
    return window.innerHeight > window.innerWidth;
}

기기가 가로 모드인지 확인

function isLandscape() {
    return (window.orientation === 90 || window.orientation === -90);
}

사용법 예

if (isPortrait()) {
    alert("This page is best viewed in landscape mode");
}

방향 변경을 어떻게 감지합니까?

$(document).ready(function() {
    $(window).on('orientationchange', function(event) {
        console.log(orientation);
    });
});

데스크탑 컴퓨터에서 브라우저 창의 크기를 조정하면 가로 또는 세로가 될 수 있기 때문에 더 안정적인 솔루션은 창 대신 화면을 사용하는 것입니다.

if (screen.height > screen.width){
    alert("Please use Landscape!");
}

이 모든 위대한 주석을 매일 코딩에 적용하기 위해 모든 응용 프로그램 간 연속성을 유지하기 위해 jquery 및 jquery 모바일 코드 모두에서 다음을 사용하기로 결정했습니다.

window.onresize = function (event) {
  applyOrientation();
}

function applyOrientation() {
  if (window.innerHeight > window.innerWidth) {
    alert("You are now in portrait");
  } else {
    alert("You are now in landscape");
  }
}

고정 된 window.orientation 쿼리를 시도하지 마십시오 (0, 90 등은 세로, 가로 등을 의미하지 않습니다).

http://www.matthewgifford.com/blog/2011/12/22/a-misconception-about-window-orientation/

브라우저에 들어오는 방법에 따라 iOS7에서도 0은 항상 세로가 아닙니다.

몇 가지 실험을 한 후 방향 인식 장치를 회전하면 항상 브라우저 창의 resize이벤트가 트리거된다는 것을 알았 습니다. 따라서 크기 조정 핸들러에서 단순히 다음과 같은 함수를 호출하십시오.

function is_landscape() {
  return (window.innerWidth > window.innerHeight);
}

나는 두 가지 솔루션을 결합했으며 나에게 잘 작동합니다.

window.addEventListener("orientationchange", function() {                   
    if (window.matchMedia("(orientation: portrait)").matches) {
       alert("PORTRAIT")
     }
    if (window.matchMedia("(orientation: landscape)").matches) {
      alert("LANSCAPE")
     }
}, false);

가장 투표 된 답변에 동의하지 않습니다. 사용 screen하지window

    if(screen.innerHeight > screen.innerWidth){
    alert("Please use Landscape!");
}

올바른 방법입니다. 로 계산 window.height하면 Android에 문제가 있습니다. 키보드가 열려 있으면 창이 축소됩니다. 따라서 창 대신 화면을 사용하십시오.

은 screen.orientation.type좋은 대답하지만, IE와 함께입니다. https://caniuse.com/#search=screen.orientation

를 통해 (JS 코드에서 언제든지) 방향을 얻으십시오.

window.orientation

때 window.orientation반환 0또는 180다음에 세로 모드 반환 할 때, 90또는 270당신은에있는 가로 모드 .

CCS 만

@media (max-width: 1024px) and (orientation: portrait){ /* tablet and smaller */
  body:after{
    position: absolute;
    z-index: 9999;
    width: 100%;
    top: 0;
    bottom: 0;
    content: "";
    background: #212121 url(http://i.stack.imgur.com/sValK.png) 0 0 no-repeat; /* replace with an image that tells the visitor to rotate the device to landscape mode */
    background-size: 100% auto;
    opacity: 0.95;
  }
}

경우에 따라 방문자가 기기를 회전 한 후 CSS를 올바르게 렌더링하기 위해 작은 코드를 추가하여 페이지에 다시로드 할 수 있습니다.

window.onorientationchange = function() { 
    var orientation = window.orientation; 
        switch(orientation) { 
            case 0:
            case 90:
            case -90: window.location.reload(); 
            break; } 
};

$(window).on("orientationchange",function( event ){
    alert(screen.orientation.type)
});

//see also http://stackoverflow.com/questions/641857/javascript-window-resize-event
//see also http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html
/*
Be wary of this:
While you can just hook up to the standard window resize event, you'll find that in IE, the event is fired once for every X and once for every Y axis movement, resulting in a ton of events being fired which might have a performance impact on your site if rendering is an intensive task.
*/

//setup 
window.onresize = function(event) {
    window_resize(event);
}

//timeout wrapper points with doResizeCode as callback
function window_resize(e) { 
     window.clearTimeout(resizeTimeoutId); 
     resizeTimeoutId = window.setTimeout('doResizeCode();', 10); 
}

//wrapper for height/width check
function doResizeCode() {
    if(window.innerHeight > window.innerWidth){
        alert("Please view in landscape");
    }
}

너비 / 높이 비교를 기반으로 방향을 결정하는 또 다른 대안 :

var mql = window.matchMedia("(min-aspect-ratio: 4/3)");
if (mql.matches) {
     orientation = 'landscape';
} 

"크기 조정"이벤트에서 사용합니다.

window.addEventListener("resize", function() { ... });

아이폰 OS 넣은 사람은 아니다 업데이트 screen.width및 screen.height방향 변경. Android는 window.orientation변경 될 때 업데이트되지 않습니다.

이 문제에 대한 나의 해결책 :

var isAndroid = /(android)/i.test(navigator.userAgent);

if(isAndroid)
{
    if(screen.width < screen.height){
        //portrait mode on Android
    }
} else {
    if(window.orientation == 0){
        //portrait mode iOS and other devices
    }
}

다음 코드를 사용하여 Android 및 iOS에서 방향 변경을 감지 할 수 있습니다.

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

window.addEventListener(orientationEvent, function() {
    alert("the orientation has changed");
}, false);

경우 onorientationchange이벤트가 지원되지 않는 이벤트가 될 것입니다 바운드 resize이벤트입니다.

최신 브라우저 window.orientation가있는 경우 작동하지 않을 수 있습니다. 이 경우 각도를 얻기 위해 다음 코드를 사용하십시오.

var orientation = window.screen.orientation.angle;

이것은 여전히 ​​실험적인 기술이므로 여기 에서 브라우저 호환성을 확인할 수 있습니다

길을 안내해 준 tobyodavies에게 감사합니다.

모바일 장치의 방향에 따라 경고 메시지를 얻으려면 다음 스크립트를 function setHeight() {

if(window.innerHeight > window.innerWidth){
    alert("Please view in landscape");
}

270 대신 -90 (빼기 90)이 될 수 있습니다.

이것은 이전 답변에서 확장됩니다. 내가 찾은 최고의 솔루션은 CSS3 미디어 쿼리가 충족되는 경우에만 나타나는 무해한 CSS 속성을 만든 다음 해당 속성에 대한 JS 테스트를 수행하는 것입니다.

예를 들어 CSS에는 다음이 있습니다.

@media screen only and (orientation:landscape)
{
    //  Some innocuous rule here
    body
    {
        background-color: #fffffe;
    }
}
@media screen only and (orientation:portrait)
{
    //  Some innocuous rule here
    body
    {
        background-color: #fffeff;
    }
}

그런 다음 JavaScript로 이동합니다 (jQuery를 funsies에 사용하고 있습니다). 색상 선언이 이상 할 수 있으므로 다른 것을 사용하고 싶을 수도 있지만 테스트에서 찾은 가장 확실한 방법입니다. 그런 다음 크기 조정 이벤트를 사용하여 전환시 선택할 수 있습니다. 다음과 같이 정리하십시오 :

function detectOrientation(){
    //  Referencing the CSS rules here.
    //  Change your attributes and values to match what you have set up.
    var bodyColor = $("body").css("background-color");
    if (bodyColor == "#fffffe") {
        return "landscape";
    } else
    if (bodyColor == "#fffeff") {
        return "portrait";
    }
}
$(document).ready(function(){
    var orientation = detectOrientation();
    alert("Your orientation is " + orientation + "!");
    $(document).resize(function(){
        orientation = detectOrientation();
        alert("Your orientation is " + orientation + "!");
    });
});

이것의 가장 좋은 부분은이 답변을 쓸 때 데스크탑 인터페이스에 영향을 미치지 않는 것입니다. 데스크톱 인터페이스는 일반적으로 페이지에 방향에 대한 인수를 전달하지 않기 때문에 (인식하는) 것입니다.

여기에 데이비드 월시의 기사를 기반으로 내가 찾은 최선의 방법은,이다 ( 모바일 장치에 대한 자세 변화를 감지 )

if ( window.matchMedia("(orientation: portrait)").matches ) {  
   alert("Please use Landscape!") 
}

설명:

Window.matchMedia () 는 미디어 쿼리 규칙을 정의하고 언제든지 유효성을 확인할 수있는 기본 메서드입니다.

onchange이 메소드의 반환 값에 리스너 를 연결하는 것이 유용하다는 것을 알았습니다 . 예:

var mediaQueryRule = window.matchMedia("(orientation: portrait)")
mediaQueryRule.onchange = function(){ alert("screen orientation changed") }

Android Chrome 'Screen Orientation API'에 사용했습니다.

현재 방향을 보려면 console.log (screen.orientation.type) (및 아마도 screen.orientation.angle)를 호출하십시오.

결과 : 초상화 기본 | 초상화 보조 | 풍경 기본 | 조경 중등

아래는 내 코드이며 도움이되기를 바랍니다.

var m_isOrientation = ("orientation" in screen) && (typeof screen.orientation.lock == 'function') && (typeof screen.orientation.unlock == 'function');
...
if (!isFullscreen()) return;
screen.orientation.lock('landscape-secondary').then(
    function() {
        console.log('new orientation is landscape-secondary');
    },
    function(e) {
        console.error(e);
    }
);//here's Promise
...
screen.orientation.unlock();

• 나는 안드로이드 크롬 만 테스트했다.

screen.orientation.addEventListener("change", function(e) {
 console.log(screen.orientation.type + " " + screen.orientation.angle);
}, false);

iOS 장치에서 JavaScript의 창 객체에는 장치의 회전을 결정하는 데 사용할 수있는 방향 속성이 있습니다. 다음은 다른 방향으로 iOS 장치 (예 : iPhone, iPad, iPod)에 대한 값 window.orientation을 보여줍니다.

이 솔루션은 안드로이드 기기에서도 작동합니다. 안드로이드 기본 브라우저 (인터넷 브라우저)와 Chrome 브라우저, 심지어 이전 버전에서도 체크인했습니다.

function readDeviceOrientation() {                      
    if (Math.abs(window.orientation) === 90) {
        // Landscape
    } else {
        // Portrait
    }
}

이것이 내가 사용하는 것입니다.

function getOrientation() {

    // if window.orientation is available...
    if( window.orientation && typeof window.orientation === 'number' ) {

        // ... and if the absolute value of orientation is 90...
        if( Math.abs( window.orientation ) == 90 ) {

              // ... then it's landscape
              return 'landscape';

        } else {

              // ... otherwise it's portrait
              return 'portrait';

        }

    } else {

        return false; // window.orientation not available

    }

}

이행

window.addEventListener("orientationchange", function() {

     // if orientation is landscape...
     if( getOrientation() === 'landscape' ) {

         // ...do your thing

    }

}, false);

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Rotation Test</title>
  <link type="text/css" href="css/style.css" rel="stylesheet"></style>
  <script src="js/jquery-1.5.min.js" type="text/javascript"></script>
  <script type="text/javascript">
        window.addEventListener("resize", function() {
            // Get screen size (inner/outerWidth, inner/outerHeight)
            var height = $(window).height();
            var width = $(window).width();

            if(width>height) {
              // Landscape
              $("#mode").text("LANDSCAPE");
            } else {
              // Portrait
              $("#mode").text("PORTRAIT");
            }
        }, false);

  </script>
 </head>
 <body onorientationchange="updateOrientation();">
   <div id="mode">LANDSCAPE</div>
 </body>
</html>

사용자가 다음을 사용하여 기기를 세로 모드로 전환했는지 감지 할 수있는 방법이 있습니다 screen.orientation

다음 코드를 사용하십시오.

screen.orientation.onchange = function () {
     var type = screen.orientation.type;
     if (type.match(/portrait/)) {
         alert('Please flip to landscape, to use this app!');
     }
}

이제 onchange사용자가 장치를 뒤집을 때마다 해고되고 세로 모드를 사용하면 경고가 나타납니다.

한 가지주의해야 할 점은 휴대 기기를 사용하지 않으면 window.orientation돌아올 것입니다 undefined. 방향을 확인하는 좋은 기능은 다음과 같을 수 그래서 여기서 x입니다 window.orientation:

//check for orientation
function getOrientation(x){
  if (x===undefined){
    return 'desktop'
  } else {
    var y;
    x < 0 ? y = 'landscape' : y = 'portrait';
    return y;
  }
}

다음과 같이 호출하십시오.

var o = getOrientation(window.orientation);
window.addEventListener("orientationchange", function() {
  o = getOrientation(window.orientation);
  console.log(o);
}, false);

아니면 그냥 사용할 수 있습니다 ..

window.addEventListener("orientationchange", function() {
    if (window.orientation == "90" || window.orientation == "-90") {
        //Do stuff
    }
}, false);