当我们使用手机浏览网页时，有时会遇到一些网页在手机平板横屏时会出现不良体验，这时我们就需要用到锁定屏幕方向的 API —— lockOrientation。本文将介绍什么是lockOrientationAPI，以及如何使用它来禁止横屏翻转。

一、什么是lockOrientationAPI？

lockOrientationAPI是一个新的web API，它可以让web开发者控制网页所允许的方向。这个API被设计来解决在移动设备上网页或应用的显示问题。通过调用它，可以改变显示方向并锁定设备在指定的方向上。

lockOrientation 方法以字符串形式的方向作为参数，并返回一个 Promise 对象。方向可以是'portrait-primary'，'portrait-secondary'，'landscape-primary'或'landscape-secondary'。

portrait-primary: 垂直向上的主方向（比如竖屏）

portrait-secondary: 垂直向下的次方向

landscape-primary: 水平向右的主方向（比如横屏）

landscape-secondary: 水平向左的次方向

二、如何使用lockOrientationAPI禁止网页横屏翻转？

在移动设备上，如果用户在浏览网页时想要切换横竖屏，很多时候这并不是我们期望的效果，因此需要禁止用户横屏切换。下面我们将针对其中一个示例网页（如下图）来讲解如何禁止横屏翻转。


首先，我们需要编写一个监听屏幕方向变化事件的函数，并将该函数绑定在window对象上。代码如下：

```javascript

let orientationChange = function(){

var body = document.querySelector('body');

if (window.orientation === 90 || window.orientation === -90) {

//横屏时禁止滚动

body.style.overflow = 'hidden'

} else {

// 竖屏时恢复，允许滚动

body.removeAttribute('style')

}

}

window.addEventListener('orientationchange', orientationChange, false);

```

其中，我们在函数中根据屏幕方向的值来控制body的overflow属性，以达到禁止横屏翻转的效果。

接下来，我们可以通过lockOrientationAPI来锁定屏幕方向。lockOrientation方法返回了一个Promise对象，通过then方法我们可以在方向锁定成功后执行我们想要执行的代码。代码如下：

```javascript

let lockOrientation = function(){

screen.orientation.lock('portrait-primary').then(function(){

console.log('方向锁定成功');

}).catch(function(error){

console.log('Error: ' + error);

});

}

lockOrientation();

```

在这里，我们通过调用screen.orientation.lock方法来锁定屏幕方向，并将方向设置为'portrait-primary'，即竖屏模式。当方向锁定成功后，程序将会在控制台输出'方向锁定成功'。

总结

通过使用lockOrientationAPI，我们可以控制网页所允许的方向，并禁止横屏翻转。在移动设备上，禁止横屏翻转可以有效的提高用户体验，避免网页显示异常等问题。感兴趣的读者可以尝试使用这个API来优化自己的网页体验。