복붙노트

[JQUERY] 방향 지시의 사용자 조언 세로 디스플레이 경고 메시지 인 경우, 뷰포트 방향을 감지

JQUERY

방향 지시의 사용자 조언 세로 디스플레이 경고 메시지 인 경우, 뷰포트 방향을 감지

해결법

  1. 1.

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

    jQuery를 모바일 당신이 만약 누군가가 회전 나중에 경고를하고 싶다면 ...이 속성의 변화를 처리하는 이벤트를이 - 위해서 orientationchange을

    또한, 일부 인터넷 검색 후, (... 내가 각도로 측정 믿고있다) window.orientation 체크 아웃

  2. 2.이 밀접하게 CSS 구문을 닮았다으로 당신은 또한 내가 사용하고 선호하는 window.matchMedia을 사용할 수 있습니다 :

    이 밀접하게 CSS 구문을 닮았다으로 당신은 또한 내가 사용하고 선호하는 window.matchMedia을 사용할 수 있습니다 :

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

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

    아이 패드 2에서 테스트.

  3. 3.데이비드 월시는 더 포인트 접근 방식에있다.

    데이비드 월시는 더 포인트 접근 방식에있다.

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

  4. 4.당신은 CSS3를 사용할 수 있습니다 :

    당신은 CSS3를 사용할 수 있습니다 :

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

  5. 5.예를 들어, 그것을 할 수있는 몇 가지 방법이 있습니다 :

    예를 들어, 그것을 할 수있는 몇 가지 방법이 있습니다 :

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

    장치가 세로 모드에 있는지 확인

    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);
    });
});

  6. 6.당신이 데스크톱 컴퓨터 브라우저 창 크기를 조정한다면 가로 또는 세로 - 내가 더 안정적인 솔루션이 모두가 될 수 있기 때문에, 대신 윈도우의 화면을 사용하는 것입니다 생각합니다.

    당신이 데스크톱 컴퓨터 브라우저 창 크기를 조정한다면 가로 또는 세로 - 내가 더 안정적인 솔루션이 모두가 될 수 있기 때문에, 대신 윈도우의 화면을 사용하는 것입니다 생각합니다.

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

  7. 7.내 일상 내 모든 응용 프로그램 사이의 연속성을 위해, 코딩이 중대한 의견을 모두 적용하기 위해, 나는 JQuery와 및 JQuery와 모바일 코드 모두에서 다음을 사용하기로 결정했습니다.

    내 일상 내 모든 응용 프로그램 사이의 연속성을 위해, 코딩이 중대한 의견을 모두 적용하기 위해, 나는 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");
  }
}

  8. 8.고정 window.orientation 쿼리를 시도하지 마십시오 (0, 90 등하지 않습니다 평균 인물, 풍경 등) :

    고정 window.orientation 쿼리를 시도하지 마십시오 (0, 90 등하지 않습니다 평균 인물, 풍경 등) :

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

    심지어 iOS7에이 브라우저 0에 와서 어떻게 따라 항상 세로 아니다

  9. 9.일부 실험 후 나는 오리엔테이션 인식 장치를 회전 항상 브라우저 윈도우의 크기 조정 이벤트를 트리거 할 것으로 나타났습니다. 그렇게하면 크기 조정 핸들러 단순히 기능을 같이 전화 :

    일부 실험 후 나는 오리엔테이션 인식 장치를 회전 항상 브라우저 윈도우의 크기 조정 이벤트를 트리거 할 것으로 나타났습니다. 그렇게하면 크기 조정 핸들러 단순히 기능을 같이 전화 :

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

  10. 10.나는 두 솔루션을 결합하고 나를 위해 잘 작동합니다.

    나는 두 솔루션을 결합하고 나를 위해 잘 작동합니다.

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

  11. 11.나는 대부분의 투표 대답에 동의하지 않는다. 사용 화면이 아닌 창

    나는 대부분의 투표 대답에 동의하지 않는다. 사용 화면이 아닌 창

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

    그것을 할 수있는 적절한 방법입니다. 당신이 window.height으로 계산하면, 당신은 안드로이드에 문제가있는 것이다. 키보드가 열려있는 경우, 윈도우는 축소. 사용 화면 대신 창 그래서.

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

  12. 12.(당신의 JS 코드에서 언제든지) 방향을 통해 얻기

    (당신의 JS 코드에서 언제든지) 방향을 통해 얻기

    window.orientation

    window.orientation 다음 0 또는 180을 반환하면 90 또는 270는 다음 가로 모드에서 복귀 할 때 세로 모드에 있습니다.

  13. 13.CCS 만

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

  14. 14.

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

  15. 15.

    //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");
    }
}

  16. 16.또 다른 대안은 너비 / 높이들의 비교에 기초하여 방향을 결정한다 :

    또 다른 대안은 너비 / 높이들의 비교에 기초하여 방향을 결정한다 :

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

    당신은 "크기 조정"이벤트에 사용 :

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

  17. 17.아이폰 OS 넣은 사람은 아니다 업데이트 screen.width 및 screen.height 방향 변경. 이 변경 안드로이드 넣은 사람은 아니다 업데이트 window.orientation.

    아이폰 OS 넣은 사람은 아니다 업데이트 screen.width 및 screen.height 방향 변경. 이 변경 안드로이드 넣은 사람은 아니다 업데이트 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
    }
}

    다음 코드를 안드로이드에 대한 방향을뿐만 아니라 아이폰 OS의 변화를 감지 할 수 있습니다 :

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

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

    onorientationchange 이벤트가 지원되지 않는 경우, 바인딩 이벤트는 크기 조정 이벤트가 될 것입니다.

  18. 18.최신 브라우저가있는 경우 window.orientation 작동하지 않을 수 있습니다. 각도를 얻기를위한 코드를 다음과 같은 경우에 사용 -

    최신 브라우저가있는 경우 window.orientation 작동하지 않을 수 있습니다. 각도를 얻기를위한 코드를 다음과 같은 경우에 사용 -

    var orientation = window.screen.orientation.angle;

    이것은 여전히 ​​실험 기술, 당신은 여기에 브라우저 호환성을 확인할 수있다

  19. 19.길을 안내하는 tobyodavies 감사합니다.

    길을 안내하는 tobyodavies 감사합니다.

    () {모바일 장치의 방향에 따라 경고 메시지를 달성하면 함수 setHeight 내에서 다음 스크립트를 구현해야합니다

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

  20. 20.대신 270, 그것은 -90 (마이너스 90)이 될 수 있습니다.

    대신 270, 그것은 -90 (마이너스 90)이 될 수 있습니다.

  21. 21.이것은 이전의 답변을 확장합니다. 내가 찾은 가장 좋은 해결책은 CSS3 미디어 쿼리가 충족되는 경우에만가 나타납니다 무해한 CSS 속성을 확인하고 해당 속성에 대한 JS 테스트를하는 것입니다.

    이것은 이전의 답변을 확장합니다. 내가 찾은 가장 좋은 해결책은 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;
    }
}

    그런 다음 (나는 funsies에 대한 jQuery를 사용하고 있습니다) 자바 스크립트로 이동합니다. 당신이 다른 사용 뭔가 할 수 있도록 색상 선언, 이상한 수도 있지만,이 방법은 내가 그것을 테스트하기 위해 찾은 가장 절대 안전한 방법입니다. 그런 다음 바로 전환에 데리러 크기 조정 이벤트를 사용할 수 있습니다. 를 위해 모두 함께 넣어 :

    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 + "!");
    });
});

    이것의 가장 좋은 부분은 내가이 답변을 작성로서, (일반적으로)가 페이지에 방향을 어떤 인수를 전달 (것)하지 않기 때문에, 데스크탑 인터페이스에 어떤 효과가 나타나지 않는다는 점이다.

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

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

    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") }

  23. 23.나는 "화면 방향 API"안드로이드 크롬 사용

    나는 "화면 방향 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();

  24. 24.

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

  25. 25.iOS 기기 자바 스크립트 윈도우 오브젝트는 상기 장치의 회전을 결정하는데 사용될 수있다 배향 특성을 갖는다. 값이 상이한 방향으로 iOS 기기 (예를 들어, 아이폰, 아이 패드, 아이팟) 미국 window.orientation 다음 프로그램.

    iOS 기기 자바 스크립트 윈도우 오브젝트는 상기 장치의 회전을 결정하는데 사용될 수있다 배향 특성을 갖는다. 값이 상이한 방향으로 iOS 기기 (예를 들어, 아이폰, 아이 패드, 아이팟) 미국 window.orientation 다음 프로그램.

    이 솔루션은 또한뿐만 아니라 안드로이드 장치에 대한 작동합니다. 난 그것의 이전 버전에서, 안드로이드 기본 브라우저 (인터넷 브라우저)와 크롬 브라우저에서 확인.

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

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

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

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

  27. 27.일부 장치는 위해서 orientationchange 이벤트를 제공하지만, 윈도우의 크기 조정 이벤트가 발생하지 않는다 :

    일부 장치는 위해서 orientationchange 이벤트를 제공하지만, 윈도우의 크기 조정 이벤트가 발생하지 않는다 :

    // Listen for resize changes
window.addEventListener("resize", function() {
    // Get screen size (inner/outerWidth, inner/outerHeight)

}, false);

    A는 위해서 orientationchange 이벤트보다 분명 비트,하지만 매우 잘 작동합니다. 여기에 확인하시기 바랍니다

  28. 28.

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

  29. 29.사용자가 screen.orientation를 사용하여 세로 모드로 자신의 장치를 뒤집어 경우 감지 할 수있는 방법이있다

    사용자가 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를가 트리거됩니다.

  30. 30.window.orientation에 대한 한 가지주의 할 점은 모바일 장치에없는 경우가 정의되지 않은 반환 할 것입니다. 방향을 확인하는 좋은 기능은 다음과 같을 수 그래서, window.orientation 여기서 x입니다 :

    window.orientation에 대한 한 가지주의 할 점은 모바일 장치에없는 경우가 정의되지 않은 반환 할 것입니다. 방향을 확인하는 좋은 기능은 다음과 같을 수 그래서, window.orientation 여기서 x입니다 :

    //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);

    31. from https://stackoverflow.com/questions/4917664/detect-viewport-orientation-if-orientation-is-portrait-display-alert-message-ad by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery를 체크 박스 변화와 클릭 이벤트  (0) 2020.10.08
[JQUERY] 크로스 브라우저 창 크기 조정 이벤트 - 자바 스크립트 / jQuery를  (0) 2020.10.08
[JQUERY] JSON 데이터를 POST를 통해 다운로드 파일에 자바 스크립트 / jQuery를  (0) 2020.10.08
[JQUERY] ES6 / ECMA6 템플릿 리터럴 - 작동하지  (0) 2020.10.08
[JQUERY] jQuery를 확인 : 변경 기본 오류 메시지  (0) 2020.10.08
,

티스토리툴바