前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScrpit判断横竖屏

JavaScrpit判断横竖屏

作者头像
悟空聊架构
发布2018-05-18 10:58:51
7230
发布2018-05-18 10:58:51
举报
文章被收录于专栏:悟空聊架构 | 公众号

 JavaScript

代码语言:javascript
复制
function setLandscapeClass(){
  if(window.orientation === 90 || window.orientation === -90 ){
    var landscapeBox = document.getElementById("landscapeBox")
    landscapeBox.className = "landscape"
  }
  if(window.orientation === 180 || window.orientation === 0){
    var landscapeBox = document.getElementById("landscapeBox")
    landscapeBox.className = "portrait"
  }
}

setLandscapeClass()

window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", setLandscapeClass, false);

CSS

代码语言:javascript
复制
.landscape{
  z-index: 1001;
  width: 100%;
  height: 100%;
  top: 0rem;
  left: 0rem;
  background: url('../images/landscape_tip.gif') no-repeat;
  background-size: cover;
  position: fixed;
}

.portrait{
  display: none;
} 

HTML

代码语言:javascript
复制
 <div id="landscapeBox"></div>

手机倒立过来,没有出现屏幕旋转,所以180度是没有用的。

(1)window.orientation 适用安卓手机和iphone6s,其他苹果手机未测试。

(2)window.screen.orientation

适用windows chrome,安卓手机。

iphone6s不适用,其他苹果手机未测试。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-09-27 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档