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


//判断手机横屏竖屏
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. unbuntu14下Qt4.8 和MySQL连接问题 QSqlDatabase: QMYSQL driver not loaded QSqlDatabase: available drivers: QSQLITE

    使用 QSqlDatabase::addDatabase创建数据库时 会报错: QSqlDatabase: QMYSQL driver not loaded QSqlDatabase: availab ...

  2. Unity基础-外部导入C# Dll(汇编集)

    外部导入C# Dll(汇编集) 使用创建一个dll工程 添加依赖的dll 导入Unity中,放入Assets的任意文件夹中 使用代码生成的dll汇编集只要"use dll的名字"引 ...

  3. Linux菜鸟起飞之路【六】权限管理(二)

    一.权限信息详解   ls -l 文件 //查看文件权限写法1 ll 文件 //查看文件权限写法2 ls -dl 目录 //查看目录权限写法1 ll -d 目录 //查看目录权限写法2 文件权限格式: ...

  4. Python数据分析实战视频教程【小蚊子数据分析实战课程】

    点击了解更多Python课程>>> Python数据分析实战视频教程[小蚊子数据分析实战课程] [课程概述] Python数据分析实战' 适用人群:适合需提升竞争力.提升工作效率.喜 ...

  5. Kubernetes(k8s)底层网络原理刨析

    目录 1 典型的数据传输流程图 2 3种ip说明 3 Docker0网桥和flannel网络方案 4 Service和DNS 4.1 service 4.2 DNS 5 外部访问集群 5.1 外部访问 ...

  6. HDU:4185-棋盘游戏

    棋盘游戏 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Problem Descri ...

  7. 【ajax】全面总结

    Ajax 的全面总结 2017-11-03 山外de楼 JavaScript Ajax在前端开发中有着举足轻重的地位,关于Ajax的使用和注意事项一直是一个重要的话题,借此机会,本文希望对Ajax做一 ...

  8. Maven本地库在哪?

    Maven的本地存储库是一个本地文件夹,用于存储你的所有项目的依赖项(插件Jars和其他Maven下载的文件).简单的说,当你建立一个Maven项目,所有依赖文件将存储在Maven的本地库. 默认情况 ...

  9. loj2028 「SHOI2016」随机序列

    定义区间是内部只含有乘号的区间. 对于区间左端点是 \(l \geq 2\) 的情况,左端点前头是加号的情况和前头是减号的情况的个数是相同的.因此这些区间不对答案产生贡献. 所以区间左端点必定是 \( ...

  10. loj2016 「SCOI2016」美味

    trie 树思想运用到主席树上orz #include <iostream> #include <cstdio> using namespace std; int n, m, ...