js设备和方向检测 [英] js device and orientation detection

问题描述

我已经基于其他已阅读的脚本编写了该脚本，并考虑到我是js/jquery的新手.

I have written this script based on other scripts i have read about, and take into consideration i'm a novice to js / jquery.

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

I want to detect the size and orientation of the device on page load and on orientation change.

以便我可以在每种情况下应用不同的规则.

So that i can apply different rules on each situation.

它在android设备上很好用，但是我发现它在ipad的纵向模式下不起作用现在我不知道我做错了什么.即使在js lint上，我也没有设置所有脚本，依此类推.一点帮助会很好.这是我编写的代码.

It works great on android devices, but i found it didnt work in portrait mode on ipad's Now i cant figure out what i did wrong. Even on js lint i get that all my scripting is not set and so on. a bit of help would be nice. This is the code i have written.

只有在使用php的移动设备上检测到您的代码时，才会触发此代码

This code is only triggered if it detects your on a mobile device using 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);
}
});
});

推荐答案

我发现了我的问题，那就是如果大于则必须比iPad的实际大小小1 px.

I have found my problem and that is that the if more then rule had to be 1 px less then the actual size to be able to be detected for iPad's.

如果有人感兴趣，这里是代码.当我添加警报以测试所有方向和刷新时，只需忽略警报即可.

Here is the code if anybody is interested. Just ignore the alerts as i added them to test all orientations and refreshes.

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

这篇关于js设备和方向检测的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！