Question

我根据我读过的其他脚本编写了这个脚本，并考虑到我是js / jquery的新手。

我想在页面加载和方向更改时检测设备的大小和方向。

这样我就可以对每种情况采用不同的规则。

它在Android设备上运行良好，但我发现它在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);
}
});
});

Answer 1

我发现了我的问题，那就是if if规则必须比iPad的实际尺寸小1 px。

如果有人感兴趣，这是代码。只需忽略警报，因为我添加它们以测试所有方向和刷新。

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

Answer 2

我发现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()。

在方向更改和调整事件大小期间也会调用该函数。

js设备和方向检测

2 个答案: