检查手机端的屏幕是横向还是纵向 - 文章教程

检查手机端的屏幕是横向还是纵向

发布于 2018-02-20 字数 2944 浏览 3654 评论 0

手机端的网页可能会存在横向或者纵向,PC 的网页则没有这些区别,也没有相关的 API 去检查这个属性,普通的网页纵向的浏览方式是最好的,可能有一些特别的应用适合横向的屏幕浏览,比如说小游戏、视频等,我们可以检查这个属性,提醒用户以舒适的方式浏览我们的网页。

检查手机端的屏幕是横向还是纵向

orientationChange

orientationChange 事件是在用户水平或者垂直翻转设备(即方向发生变化)时触发的事件。

// Listen for orientation changes
window.addEventListener("orientationchange", function() {
    // Announce the new orientation number
    alert(window.orientation);
}, false);
// jQuery 写法
$(window).on("orientationchange",function(){
    alert("方向已改变!");
});

如果用户改变屏幕的方向,window.orientation 的值会发生变化,-90 意味着该设备横向旋转到右侧,而 90 表示该设备是横向旋转到左边。

检查手机端的屏幕是横向还是纵向

Resize

有些设备并没有提供 orientationchange 事件,但是会触发窗口的 resize 事件:

// Listen for resize changes
window.addEventListener("resize", function() {
    // Get screen size (inner/outerWidth, inner/outerHeight)

}, false);

可能没有 orientationchange 事件那么好用,但是这不失为一种有效的解决方法,只是无法检查用户旋转的方向。

直接比较屏幕的长宽比

手机的屏幕肯定是矩形的,这意味着有一边长一点,有一边要短一点,使用长度除以宽度,如果值是大于 1 的,那么就表明用户是竖着屏幕的,反之亦然。

if(window.screen.availHeight/window.screen.availWidth > 1){
    // 纵向屏幕
}else{
    // 横向屏幕
}

结合上面的 resize 方法,就能检测用户旋转屏幕的方向了。

媒体查询

我们还可以通过 CSS 的媒体查询确定屏幕的方向:

/* portrait */
@media screen and (orientation:portrait) {
    /* portrait-specific styles */
}
/* landscape */
@media screen and (orientation:landscape) {
    /* landscape-specific styles */
}

matchMedia

进一步的通过 JS 的媒体查询,也能确定屏幕的方向:

// Find matches
var mql = window.matchMedia("(orientation: portrait)");
// If there are matches, we're in portrait
if(mql.matches) { 
 // Portrait orientation
} else { 
 // Landscape orientation
}
// Add a media query change listener
mql.addListener(function(m) {
 if(m.matches) {
 // Changed to portrait
 }
 else {
 // Changed to landscape
 }
});

上面这么多的方法,总有一个适合你的项目,如果你有更好的解决方法,请留言告诉我。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

伊面

文章 0 评论

白况

文章 0 评论

七禾

文章 0 评论

亢潮

文章 0 评论

悲念泪

文章 0 评论