方法二:在网页中强制横屏(开发者方案)
如果你是网页开发者,可通过以下方式引导用户保持横屏:
检测当前设备方向,若为竖屏则提示用户旋转设备。
使用 CSS 和 JavaScript 实现横屏提示遮罩。
示例代码:
body { margin: 0; overflow: hidden; }
#landscape-hint {
position: fixed;
top: 0; left: 0;
width: 100vw; height: 100vh;
background: #000;
color: white;
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9999;
}
请将设备旋转为横屏模式
![]()
function checkOrientation() {
const hint = document.getElementById('landscape-hint');
if (window.innerWidth < window.innerHeight) {
hint.style.display = 'flex';
} else {
hint.style.display = 'none';
}
}
window.addEventListener('resize', checkOrientation);
checkOrientation(); // 初始检查