美文网首页
移动端横竖屏

移动端横竖屏

作者: 影子_8736 | 来源:发表于2019-03-26 22:58 被阅读0次

关于横竖屏的获取:

1、var isPortrait = window.matchMedia("(orientation: portrait)").matches;

通过判断 isPortrait 的值true/false。通过window.addEventListener("resize",function(){})监听来判断当前是横屏还是竖屏。

2、通关监听window.addEventListener("resize",function(){}) 拿window.innerWidth,window.innerHeight的比较,判断当前是横屏还是竖屏。

3、window.addEventListener("onorientationchange"inwindow ? "orientationchange" : "resize", onOrientationWinodow,false);

function onOrientationWinodow() {

if(window.orientation == 180 || window.orientation == 0) {

    alert("竖屏状态!")

  }

  if(window.orientation == 90 || window.orientation == -90) {

    alert("横屏状态!")

    }

}

但第三中有一个问题,那就是在某些pad下会出现横竖屏旋转的角度是反着的。

所以最好是用resize去判断会好一些。

相关文章

网友评论

      本文标题:移动端横竖屏

      本文链接:https://www.haomeiwen.com/subject/qttbtqtx.html