Javascript 判断网页横竖屏

本篇文章由: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>

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

posted @ 2015-06-19 15:43  xinpureZhu  阅读(479)  评论(0编辑  收藏  举报