1

私はこれまで読んだ他のスクリプトに基づいてこのスクリプトを作成しました。また、私がjs/jqueryの初心者であることを考慮に入れています。

ページの読み込み時と向きの変更時に、デバイスのサイズと向きを検出したい。

それぞれの状況に異なるルールを適用できるように。

それはアンドロイドデバイスでうまく機能します、しかし私はそれがipadのポートレートモードで機能しなかったことを発見しました今私は私が間違ったことを理解することができません。js lintでも、すべてのスクリプトが設定されていないなどのことがわかります。少し助けていただければ幸いです。これは私が書いたコードです。

このコードは、phpを使用してモバイルデバイスであなたを検出した場合にのみトリガーされます

$(document).ready(function(){


var height = $(window).height();
var width = $(window).width();

if ( $(window).width() < 768) {
if(width>height) {
    // Smartphone Landscape Rules
    var orientation = ' Landscape';
}else{
    // Smartphone Portrait Rules
    var orientation = ' Portrait';
    }
alert ('Smartphone '+width+' - '+height+orientation);
}
if ( $(window).width() > 768) {
if(width>height) {
    // Tablet Landscape Rules
    var orientation = ' Landscape';
}else{
    // Tablet Portrait Rules
    var orientation = ' Portrait';
    }
alert ('Tablet '+width+'-'+height+orientation);
}

$(window).resize( function(){
var height = $(window).height();
var width = $(window).width();

alert (width+' - '+height);

if ( $(window).width() < 768) {
    if(width>height) {
    // Smartphone Landscape Rules
    var orientation = ' Landscape';
}else{
    // Smartphone Portrait Rules
    var orientation = ' Portrait';
    }
alert ('Smartphone '+width+'-'+height+orientation);
}
if ( $(window).width() > 768) {
    if(width>height) {
    // Tablet Landscape Rules
    var orientation = ' Landscape';
}else{
    // Tablet Portrait Rules
    var orientation = ' Portrait';
    }
    alert ('Tablet '+width+'-'+height+orientation);
}
});
});
4

2 に答える 2

0

私は自分の問題を発見しました。それは、iPadで検出できるようにするには、ルールが実際のサイズよりも1ピクセル小さい必要があるということです。

誰かが興味を持っている場合のコードは次のとおりです。すべての向きと更新をテストするためにアラートを追加したので、アラートを無視してください。

var height = $(window).height();
var width = $(window).width();

if ( $(window).width() < 768) {
if(width>height) {
    // Smartphone Landscape Rules
    var orientation = ' Landscape';
}else{
    // Smartphone Portrait Rules
    var orientation = ' Portrait';
    }
alert ('Smartphone '+width+' - '+height+orientation);
}
if ( $(window).width() > 767) {
if(width>height) {
    // Tablet Landscape Rules
    var orientation = ' Landscape';
}else{
    // Tablet Portrait Rules
    var orientation = ' Portrait';
    }
alert ('Tablet '+width+'-'+height+orientation);
}

$(window).resize( function(){
var height = $(window).height();
var width = $(window).width();

if ( $(window).width() < 768) {
    if(width>height) {
    // Smartphone Landscape Rules
    var orientation = ' Landscape';
}else{
    // Smartphone Portrait Rules
    var orientation = ' Portrait';
    }
alert ('Smartphone '+width+'-'+height+orientation);
}
if ( $(window).width() > 767) {
    if(width>height) {
    // Tablet Landscape Rules
    var orientation = ' Landscape';
}else{
    // Tablet Portrait Rules
    var orientation = ' Portrait';
    }
    alert ('Tablet '+width+'-'+height+orientation);
}
});
于 2012-10-01T09:45:20.467 に答える
0

私が見つけたように、window.orientationの値は、Androidのデバイス（タブレット/電話）によって異なります。Androidの画面モード定義に次のコードを使用しました。

function isPortraitMode(){ 
   var screenWidth = Math.max(window.innerWidth, window.innerHeight);
   if (typeof window._myScreenWidth === 'undefined' // called at the first time (during the load) and the keyboard is not shown (won't take some height) 
        || window._myScreenWidth < screenWidth){  // sometimes window appears with animation and smaller size can be gathered during the animation at first time
        window._myScreenWidth = screenWidth;
   }
   return (window.innerWidth < window._myScreenWidth);
}

キーボードがを変更するため、最初の呼び出し中にキーボードが非表示になることが予想されますwindow.innerHeight。isPortraitMode()最初のロードで呼び出されます。

この関数は、向きの変更およびサイズ変更イベント中にも呼び出されます。

于 2015-08-10T10:30:44.820 に答える