专栏首页Jackson0714JavaScrpit判断横竖屏

JavaScrpit判断横竖屏

 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

.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

 <div id="landscapeBox"></div>

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

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

(2)window.screen.orientation

适用windows chrome,安卓手机。

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScrpit判断横竖屏

    Jackson0714
  • VS 添加Snippets

    Jackson0714
  • 【博客美化】09.评论带头像,且支持旋转

    Jackson0714
  • JavaScrpit判断横竖屏

    Jackson0714
  • 服务器又一次被恶意攻击,MongoDB被删库

    前几天在自己个人的一台腾讯云服务器上安装了MongoDB,当时着急用,就用的默认配置(端口是默认端口,也没设置密码),后来就把这事抛到脑后了,也因为经常用无线网...

    DannyHoo
  • 浅谈Android Support v4 v7 v13 v17

    前言:今天在开发应用的时候用到android-support-v7-appcompat以及support-v4这两个依赖库的时候遇到一些问题,code在编译的时...

    AlicFeng
  • Linux C 读取文件夹下所有文件(包括子文件夹)的文件名【转】

    转自:https://www.cnblogs.com/xudong-bupt/p/3504442.html

    用户3033338
  • 01:查找特定的值

    01:查找特定的值 查看 提交 统计 1 #include<iostream> 2 using namespace std; 3 int a[100...

    attack
  • ofo与中信银行合作背后:共享单车行业巨额押金迎来托管时代

    4月13日ofo与中信银行达成战略合作,推出ofo+中信联名卡,凡持该卡的用户均可享受ofo免99元押金用车服务。除此之外双方还将在押金托管、支付结算、跨境金融...

    罗超频道
  • 如何招聘程序猿?

    同步分布:http://www.yuanrengu.com/index.php/20170314.html

    猿人谷

扫码关注云+社区

领取腾讯云代金券