在一些移动端页面中,页面的样式我们就支持竖屏播放,这时我们就需要判断是横屏还是竖屏了,不同的方向显示冉的样式。


//判断手机横屏竖屏
var html = "";
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
if(window.orientation === 180 || window.orientation === 0) {
alert('竖屏状态!');
var ele = document.getElementsByClassName("henping")[0];
ele.style.display = "none"; }
if(window.orientation === 90 || window.orientation === -90) {
alert('横屏状态!');
var ele = document.createElement("div");
ele.setAttribute("class", "henping");
var tet = document.createTextNode("请使用竖屏浏览");
ele.appendChild(tet);
ele.addEventListener("touchstart", cancle);
ele.addEventListener("touchmove", cancle);
document.body.appendChild(ele)
function cancle(e) {
e.preventDefault();
}
}
}, false);

 

js-判断移动端用户是横屏放的还是竖屏放的的更多相关文章

  1. js 判断pc端或手机端

    <script> (function () { var navUA = navigator.userAgent; var defIncludeStr = "iPhone|Andr ...

  2. js判断移动端是否安装某款app的多种方法

    本文实例讲解了js判断移动端是否安装某款app的多种方法,分享给大家供大家参考,具体内容如下 第一种方法: 一:判断是那种设备 ? || u.indexOf(; //android终端或者uc浏览器 ...

  3. JS 判断移动端与PC端

    js判断移动端与pc端   这里介绍下使用device.js插件来判断移动端设备 地址:https://github.com/matthewhudson/device.js 示例: 1 2 3 4 5 ...

  4. JS判断移动端还是PC端(改造自腾讯网) 仅用于宣传动画,下载页等

    JS判断移动端还是PC端(改造自腾讯网 http://www.qq.com/) 本脚本仅用于宣传动画,下载页( ipad 也算pc端)等,  ionic 用 ionic.platform 即可( io ...

  5. android 国际化 横屏(land) 竖屏(port)margin外边距和padding内边距

    android 国际化 横屏(land) 竖屏(port) 边距又分为内边距和外边距,即margin和padding.

  6. JS判断登陆端是PC还是手机

    前些天朋友问我怎么判断登陆端是PC还是手机...自己也是很困惑,然后自己查了资料,这些东西都藏在USER-AGENT里面,查了他的一些属性,写了一个简单的验证页面大家共同学习. 读取navigator ...

  7. JS判断移动端访问设备并加载对应CSS样式

    JS判断不同web访问环境,主要针对移动设备,提供相对应的解析方案(判断设备代码直接copy腾讯网的) // 判断是否为移动端运行环境 if(/AppleWebKit.*Mobile/i.test(n ...

  8. js判断移动端和PC端跳转不同页面

    方法一: /* * * 判断PC端与WAP端 */ var mobile_bs = { versions: function() { var u = navigator.userAgent; retu ...

  9. js判断PC端与移动端跳转

    在网上看到很多这样类似的代码,但是有的很复杂,或者有的没有判断完全,上次经理去见完客户回来讲,使用苹果浏览打开pc端(pc已经做了识别跳转)会自动跳转到移动端的网页去,后来经测试才发现 documen ...

随机推荐

  1. Voyager的Roles和Pemissions

    以Page为例讲解: 取消admin的roles下Pages的Browse Pages权限: 打开web.php文件,添加: Route::get('pages', function(){ retur ...

  2. 02等待单个线程返回WaitForSingleObject

    windows 多线程之等待线程返回 ​ 多线程编程中,有时我们需要等待某一线程完成了特定的操作之后再继续做其他事情,要实现这个目的,可以使用 Windows API 函数 WaitForSingle ...

  3. json转换为字典

    str---dict ata_dict=json.loads(data)

  4. DeepFaceLab小白入门(5):训练换脸模型!

    训练模型,是换脸过程中最重要的一部分,也是耗时最长的一部分.很多人会问到底需要多少时间?有人会告诉你看loss值到0.02以下就可以了.我会告诉你,不要看什么数值,看预览窗口的人脸.看第二列是否和第一 ...

  5. linux的一些权限的操作 chmod

    u ---属主 g ---用户组 o ---其他组 + ----赋予权限 - ----取消权限 = ----赋予权限并取消以前的权限 r = 4   //读 w =2   //写 x =1   //执 ...

  6. 树莓派开发板入门学习笔记1:[转]资料收集及树莓派系统在Ubuntu安装

    参考教程(微雪课堂):http://www.waveshare.net/study/portal.php 树莓派实验室: http://shumeipai.nxez.com/2014/12/21/us ...

  7. JDK1.8 HashMap$TreeNode.rotateLeft 红黑树左旋

    红黑树介绍 1.节点是红色或黑色. 2.根节点是黑色. 3.每个叶子节点都是黑色的空节点(NIL节点). 4 每个红色节点的两个子节点都是黑色.(从每个叶子到根的所有路径上不能有两个连续的红色节点) ...

  8. Android开发——AsyncTask的使用以及源码解析

    .AsyncTask使用介绍  转载请标明出处:http://blog.csdn.net/seu_calvin/article/details/52172248 AsyncTask封装了Thread和 ...

  9. 《小团团团队》第九次团队作业:Beta冲刺与验收准备

    项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 实验十三 团队作业9:Beta冲刺与团队项目验收 团队名称 小团团团队 作业学习目标 (1)掌握软件黑盒测试技术:(2)学 ...

  10. 了解JavaScript核心精髓(一)

    ES5 1.声明脚本 <script type="text/javascript"></script> 2.DOM与BOM DOM(Document Obj ...