Javascript 判断网页横竖屏

最新推荐文章于 2025-08-19 08:41:01 发布

转载最新推荐文章于 2025-08-19 08:41:01 发布 · 118 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xinpureZhu/p/4588892.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用JavaScript通过window.orientation属性判断手机横竖屏的方法，并提供了代码示例，有助于改善移动网页用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本篇文章由：http://xinpure.com/javascript-to-determine-page-anyway-screen/

Html5 流行至今，自适应的网站已经多如牛毛，但是横竖屏的切换依然还是影响用户体验的一个重点(在网页中，竖屏的用户体验显然是高于横屏的)。

使用 orientation 判断横竖屏

我们可以通过 JS 的 window.orientation 来判断当前网页窗口的方向

<script type="text/javascript">
function testOrientation() {
    if (window.orientation == 90 || window.orientation == -90) {
        alert('现在是横屏, 请切换到竖屏以获得最佳浏览体验！');
    }
    else if(window.orientation == 180 || window.orientation == 0) {
        alert('现在是竖屏, 浏览效果最佳！');
    }
}
window.addEventListener('onorientationchange' in window ? 'orientationchange' : 'resize', testOrientation, false);
</script>

这样的话，当用户切换到横屏的时候，我们就可以，提示用户切换回竖屏，更好的浏览网页。

转载于:https://www.cnblogs.com/xinpureZhu/p/4588892.html