1

我已经根据我读过的其他脚本编写了这个脚本，并考虑到我是 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);
}
});
});
4

2 回答 2

0

我发现了我的问题，那就是 if more then 规则必须比 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);
}
});
于 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 回答