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


//判断手机横屏竖屏
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. Python数据分析【炼数成金15周完整课程】

    点击了解更多Python课程>>> Python数据分析[炼数成金15周完整课程] 课程简介: Python是一种面向对象.直译式计算机程序设计语言.也是一种功能强大而完善的通用型语 ...

  2. AOP面向切面编程笔记

    1.AOP概念:Aspect Oriented Programming 面向切面编程 2.作用:本质上来说是一种简化代码的方式 继承机制 封装方法 动态代理 …… 3.情景举例 ①数学计算器接口[Ma ...

  3. LeetCode(173) Binary Search Tree Iterator

    题目 Implement an iterator over a binary search tree (BST). Your iterator will be initialized with the ...

  4. sublime text3 安装ctags实现函数跟踪跳转

    来源:http://blog.csdn.net/menglongfc/article/details/51141084 本人试用平台如下:sublime text3,和谐版 在source insig ...

  5. Cheese Aizu - 0558 (搜索题)

    Time limit8000 ms Memory limit131072 kB チーズ () 問題 今年も JOI 町のチーズ工場がチーズの生産を始め,ねずみが巣から顔を出した.JOI 町は東西南北に ...

  6. debian卸载vmware

    原因: 由于vagrant默认支持virtualbox,而要支持vmware需要一个商用付费的插件.所以卸载vmware,使用virtualbox 具体操作: $ sudo vmware-instal ...

  7. 浅谈CSS中的百分比

    结论: 标准流中的元素,看其属性有没有继承性.对于width和margin-left,它是可以继承的,它会参照父元素或者祖先元素(其实是包含块):对于height,它没有继承性,父元素或者祖先元素会自 ...

  8. JAVA-基础(四) Aarryas 数组

    1. asList( )方法 返回一个被指定数组支持的List.换句话说,列表和数组访问的是同一个 单元.它具有如下的形式: static List asList(Object[ ] array) 2 ...

  9. socketcluster 客户端请求

    <html> <head> <title>test</title> <script src="https://cdn.bootcss.c ...

  10. webdriver高级应用- 修改Chrome设置伪装成手机M站

    通过更改PC端Chrome浏览器的属性值,将PC端Chrome浏览器设定为手机端尺寸的浏览器,以便模拟手机端的浏览器,并完成各种页面操作. #encoding=utf-8from selenium i ...