Yönlendirme, kullanıcıya talimatları bildiren Dikey ekran uyarı mesajı ise görünüm alanı yönlendirmesini algılama

Özellikle mobil cihazlar için bir web sitesi yapıyorum. Özellikle en iyi yatay modda görüntülenen bir sayfa vardır.

Bu sayfayı ziyaret eden kullanıcının Sayfayı Dikey modda görüntüleyip görüntülemediğini tespit etmenin bir yolu var mı? Kullanıcı zaten yatay modda görüntülüyorsa, hiçbir mesaj görünmez.

Temel olarak, sitenin görünüm yönü yönünü algılamasını istiyorum, eğer yön Dikey ise , kullanıcıya bu sayfanın en iyi Manzara modunda görüntülendiğini bildiren bir uyarı mesajı görüntüler .

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

jQuery Mobile, bu özelliğin değiştirilmesini sağlayan bir olaya sahiptir ... eğer biri daha sonra dönerse uyarmak istiyorsanız - orientationchange

Ayrıca, biraz googling yaptıktan sonra, kontrol edin window.orientation(bu derece olarak ölçüldüğüne inanıyorum ...)

Ayrıca window.matchMedia, CSS sözdizimine çok benzediği için kullandığım ve tercih ettiğim:

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

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

İPad 2'de test edildi.

David Walsh'un daha iyi ve noktaya yaklaşımı var.

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

Bu değişiklikler sırasında window.orientation özelliği değişebilir. 0 değeri dikey görünüm, -90 ise cihazın sağa döndürülmüş yatay, 90 değeri ise cihazın sola döndürülmüş yatay olduğu anlamına gelir.

http://davidwalsh.name/orientation-change

CSS3'ü kullanabilirsiniz:

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

Bunu yapmanın birkaç yolu vardır, örneğin:

• window.orientationDeğeri kontrol et
• Karşılaştır innerHeightvs.innerWidth

Aşağıdaki yöntemlerden birini uyarlayabilirsiniz.

Cihazın dikey modda olup olmadığını kontrol edin

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

Cihazın yatay modda olup olmadığını kontrol edin

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

Örnek kullanım

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

Yön değişikliğini nasıl tespit edebilirim?

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

Bence daha istikrarlı bir çözüm pencere yerine ekranı kullanmaktır, çünkü tarayıcı pencerenizi masaüstü bilgisayarda yeniden boyutlandırırsanız hem yatay hem de dikey olabilir.

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

Tüm bu harika yorumları günlük koduma uygulamak için, tüm uygulamalarım arasında süreklilik için, hem jquery hem de jquery mobil kodumda aşağıdakileri kullanmaya karar verdim.

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

Sabit pencere denemeyin. Yönlendirme sorguları (0, 90 vb. Portre, manzara vb. Anlamına gelmez):

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

İOS7'de bile tarayıcıya nasıl geldiğinize bağlı olarak 0 her zaman portre değildir

Bazı deneylerden sonra, yönlendirmeye duyarlı bir cihazın döndürülmesinin her zaman bir tarayıcı penceresinin resizeolayını tetikleyeceğini buldum . Yeniden boyutlandırma işleyicinizde basitçe aşağıdaki gibi bir işlev çağırın:

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

İki çözümü birleştirdim ve benim için iyi çalışıyor.

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

En çok oy alan cevaba katılmıyorum. Kullan screenve değilwindow

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

Bunu yapmanın doğru yolu. window.heightİle hesaplarsanız , Android'de sorun yaşarsınız. Klavye açıkken pencere daralır. Yani pencere yerine ekranı kullanın.

screen.orientation.typeİyi bir cevap ama IE ile olduğunu. https://caniuse.com/#search=screen.orientation

(Js kodunuzda istediğiniz zaman) yönlendirmeyi alın

window.orientation

Ne zaman window.orientationdöner 0veya 180sonra olan dikey modda döndürürken, 90ya 270sonra bulunduğunuz yatay modda .

Yalnızca 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;
  }
}

Bazı durumlarda, ziyaretçi cihazı döndürdükten sonra sayfaya yeniden yüklemek için küçük bir kod parçası eklemek isteyebilirsiniz, böylece CSS düzgün şekilde işlenir:

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

genişlik / yükseklik karşılaştırmasına dayalı olarak yönlendirmeyi belirlemek için başka bir alternatif:

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

Bunu "resize" etkinliğinde kullanırsınız:

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

iOS , yön değiştiğinde screen.widthve güncellenmediğinde screen.height. Android window.orientationdeğiştiğinde güncellenmez .

Bu soruna benim çözümüm:

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'de ve iOS'taki yönelimdeki bu değişikliği aşağıdaki kodla tespit edebilirsiniz:

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

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

Eğer onorientationchangeolay desteklenmez, etkinlik olacak bağlı resizebir olay.

En son tarayıcılara sahipseniz window.orientationçalışmayabilir. Bu durumda açı elde etmek için aşağıdaki kodu kullanın -

var orientation = window.screen.orientation.angle;

Bu hala deneysel bir teknolojidir, tarayıcı uyumluluğunu buradan kontrol edebilirsiniz

Tobyodavies yol rehberlik için teşekkür ederiz.

Mobil cihazın yönüne göre bir uyarı mesajı elde etmek için, aşağıdaki komut dosyasını function setHeight() {

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

270 yerine -90 (eksi 90) olabilir.

Bu, önceki bir cevabı genişletir. Bulduğum en iyi çözüm, yalnızca bir CSS3 medya sorgusu karşılandığında görünen ve daha sonra bu özellik için JS testine sahip olan, zararsız bir CSS özelliği yapmaktır.

Örneğin, CSS'de:

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

Daha sonra JavaScript'e gidin (eğlenceler için jQuery kullanıyorum). Renk bildirimleri garip olabilir, bu yüzden başka bir şey kullanmak isteyebilirsiniz, ancak bu test etmek için bulduğum en kusursuz yöntemdir. Daha sonra anahtarlamayı almak için resize olayını kullanabilirsiniz. Hepsini bir araya getirin:

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

Bunun en iyi yanı, bu yanıtı yazdığımdan beri, masaüstü arayüzleri üzerinde herhangi bir etkisi olmadığı, çünkü (genellikle) sayfaya yönlendirme için herhangi bir argüman iletmedikleri (görünmedikleri).

İşte David Walsh'ın maddeye dayalı buldum en iyi yöntem, var ( Mobil Cihazlarda Oryantasyon Değiştir Algılama )

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

Açıklama:

Window.matchMedia () , bir medya sorgu kuralı tanımlamanıza ve geçerliliğini herhangi bir zamanda kontrol etmenize olanak tanıyan yerel bir yöntemdir.

onchangeBu yöntemin dönüş değerine bir dinleyici iliştirmeyi yararlı buluyorum . Misal:

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

Android Chrome "Ekran Yönlendirme API'sı" için kullandım

Geçerli yönlendirmeye bakmak için console.log (screen.orientation.type) (ve belki screen.orientation.angle) öğesini arayın.

Sonuçlar: portre-birincil | ikincil portre | peyzaj-birincil | Yatay sekonder

Kodumu aşağıda, umarım faydalı olacaktır:

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

• Yalnızca Android Chrome için test ettim - tamam

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

İOS aygıtlarındaki JavaScript'teki pencere nesnesinin, aygıtın dönüşünü belirlemek için kullanılabilecek bir yönlendirme özelliği vardır. Aşağıda değerler penceresi gösterilmektedir. İOS aygıtları (örneğin iPhone, iPad, iPod) için farklı yönlerde yönlendirme.

Bu çözüm aynı zamanda android cihazlar için de çalışır. Android yerel tarayıcısını (İnternet tarayıcısı) ve Chrome tarayıcısında, eski sürümlerinde bile kontrol ettim.

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

Ben bunu kullanıyorum.

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

    }

}

uygulama

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>

Kullanıcının cihazını kullanarak portre moduna çevirip çevirmediğini tespit etmenin bir yolu vardır. screen.orientation

Sadece aşağıdaki kodu kullanın:

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

Şimdi, onchangekullanıcı cihazı çevirdiğinde tetiklenir ve kullanıcı portre modunu kullandığında uyarı açılır.

Dikkat edilmesi gereken bir şey , bir mobil cihazda değilseniz window.orientationgeri döneceğidir undefined. Yönlendirme için kontrol etmek iyi işlev şöyle görünebilir Peki, nerede xolduğunu window.orientation:

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

Öyle söyle:

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

Ya da sadece bunu kullanabilirsiniz ..

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