就我所见,几乎所有的移动浏览器都出现这种问题,并且没有简单的解决方案。
Chrome小组未来一个半官方的建议贴on their blog下解锁屏幕上的设备方向变化是使用deviceorientation
和模拟一下浏览器内部确实找出设备的方向:
var previousDeviceOrientation, currentDeviceOrientation;
window.addEventListener('deviceorientation', function onDeviceOrientationChange(event) {
// event.beta represents a front to back motion of the device and
// event.gamma a left to right motion.
if (Math.abs(event.gamma) > 10 || Math.abs(event.beta) < 10) {
previousDeviceOrientation = currentDeviceOrientation;
currentDeviceOrientation = 'landscape';
return;
}
if (Math.abs(event.gamma) < 10 || Math.abs(event.beta) > 10) {
previousDeviceOrientation = currentDeviceOrientation;
// When device is rotated back to portrait, let's unlock screen orientation.
if (previousDeviceOrientation == 'landscape') {
screen.orientation.unlock();
window.removeEventListener('deviceorientation', onDeviceOrientationChange);
}
}
});
Chrome团队使用此代码的特定用例是在使用screen.orientation.lock
(禁用方向更改事件)后获取设备的方向。
这可以概括为方向改变事件给你一个微小的时间优势动画踢之前的替代品。
棘手的部分是找出了该浏览器决定切换方向正确的角度范围(当浏览器没有实际切换方向时,您不想开始动画)。
解决此问题的一种方法是使用screen.orientation.lock
完全控制方向更改,其中基本上设置了阈值并相应地锁定方向。
但是,由于世界并不完美,screen.orientation.lock
只适用于全屏模式或独立的网络应用程序......如果您打算让您的应用程序成为全屏体验或独立的网络应用程序,那么您是幸运的。
我正在寻找解决这个相同的问题,你找到一个? – 2017-06-24 08:11:55
@WassimGr我没有 – kevzettler 2017-06-24 19:03:13
我找到了一个部分解决方案,我会在这里发布 – 2017-07-14 05:07:42