JavaScript实现移动端横竖屏检测

下面就给您讲解一下JavaScript实现移动端横竖屏检测的完整攻略：

步骤一：获取屏幕高宽

使用JS获取屏幕高宽的方式如下：

var screenWidth = window.innerWidth; // 获取屏幕宽度，不包含滚动条
var screenHeight = window.innerHeight; // 获取屏幕高度，不包含地址栏
var screenAvailWidth = window.screen.availWidth; // 获取屏幕可用宽度，包含滚动条
var screenAvailHeight = window.screen.availHeight; // 获取屏幕可用高度，包含地址栏

步骤二：判断横竖屏

通过监听orientationchange事件（移动端浏览器横竖屏切换时会触发此事件）来判断当前横竖屏状态。代码示例如下：

window.addEventListener('orientationchange', function () {
    if (window.orientation == 180 || window.orientation == 0) {
        // 竖屏状态
    }
    if (window.orientation == 90 || window.orientation == -90) {
        // 横屏状态
    }
});

此处需要注意的是，在某些移动端浏览器中，可能不支持orientationchange事件，此时我们需要使用resize事件来代替，代码如下：

window.addEventListener('resize', function () {
    if (screenWidth < screenHeight) {
        // 竖屏状态
    } else {
        // 横屏状态
    }
});

示例一：设置横竖屏样式

当用户使用移动设备横竖屏切换时，我们可能需要改变页面UI样式，例如：竖屏时页面宽度相对较小，应将字体缩小，调整布局等；横屏时页面宽度相对较大，应将字体增大，调整布局等。

实现示例如下：

window.addEventListener('orientationchange', function () {
    if (window.orientation == 180 || window.orientation == 0) {
        // 竖屏状态
        document.getElementById('viewport').setAttribute('content', 'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no');
        document.getElementById('container').style.width = '90%';
        document.getElementById('container').style.margin = '0 auto';
        // 其他适配操作
    }
    if (window.orientation == 90 || window.orientation == -90) {
        // 横屏状态
        document.getElementById('viewport').setAttribute('content', 'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no');
        document.getElementById('container').style.width = '100%';
        document.getElementById('container').style.margin = '0 auto';
        // 其他适配操作
    }
});

在此示例中，我们监听了orientationchange事件，并根据屏幕横竖状态调整了页面字体大小、布局等样式。

示例二：禁止横屏

有些场景下，为了更好的用户体验，我们需要禁止用户在横屏状态下浏览网页。此时，我们可以通过监听orientationchange事件或resize事件，判断横竖屏状态，如果屏幕为横屏状态，则强制将页面旋转至竖屏状态。

实现示例如下：

function restrictLandscape() {
    if (window.orientation == 90 || window.orientation == -90) {
        // 屏幕为横屏状态
        var body = document.getElementsByTagName('body')[0];
        body.style.transform = "rotate(90deg)";
        body.style.transformOrigin = "50% 50%";
        body.style.width = "100%";
        body.style.height = "100%";
        body.style.position = "absolute";
        body.style.top = "0";
        body.style.left = "0";
        body.style.overflow = "hidden";
    } else {
        // 屏幕为竖屏状态
        var body = document.getElementsByTagName('body')[0];
        body.style.transform = "rotate(0deg)";
        body.style.transformOrigin = "50% 50%";
        body.style.width = "auto";
        body.style.height = "auto";
        body.style.position = "static";
        body.style.top = "auto";
        body.style.left = "auto";
        body.style.overflow = "auto";
    }
}
window.addEventListener('orientationchange', function () {
    restrictLandscape();
});
window.addEventListener('resize', function() {
    restrictLandscape();
});

在此示例中，我们通过transform属性控制了页面的旋转角度，使页面能够随屏幕横竖屏状态自适应，保证用户在竖屏状态下浏览页面。

以上就是JavaScript实现移动端横竖屏检测的完整攻略，包括获取屏幕高宽和判断横竖屏状态两个步骤，关键代码以示例的形式给出，方便开发者参考和使用。