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


//判断手机横屏竖屏
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-matplotlib-lec1

    接演前文. 设置属性的方法: 使用对象的set_*方法,单独设置每个属性:或使用plt.setp同时设置多个属性 # -*- coding: utf-8 -*- import numpy as np ...

  2. 【HIHOCODER 1589】回文子串的数量(Manacher)

    描述 给定一个字符串S,请统计S的所有|S| * (|S| + 1) / 2个子串中(首尾位置不同就算作不同的子串),有多少个是回文字符串? 输入 一个只包含小写字母的字符串S. 对于30%的数据,S ...

  3. 数学基础:HDU2802-F(N)(寻找循环节)

    F(N) Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submissi ...

  4. 天气API接口的使用

    最近项目中使用到了天气预报的功能,需要从网上获取天气数据,然后显示在公司系统的页面上. 在这里和大家分享下我的做法,希望能对大家有所帮助,如果有错误,欢迎大家指正. 先给大家看看效果: 下面开始进行讲 ...

  5. multiprocessing join与lock区别

    加锁 join方法 join方法会造成阻塞,在上一个进程完成之前不会运行join()后面的代码 lock  仍会执行之后的代码,遇到创建进程,会发向操作系统发出指令,但不会执行,等到上锁的进程结束之后 ...

  6. Django Form two

    Django_Form: 1.class TeacherNewForm(Form): username = fields.CharField( required=True, error_message ...

  7. FFT、NTT学习笔记

    参考资料 picks miskcoo menci 胡小兔 unname 自为风月马前卒 上面是FFT的,学完了就来看NTT吧 原根 例题:luogu3803 fft优化后模板 #include < ...

  8. luogu1262 间谍网络

    贿赂所有能贿赂的,如果还有人不被访问则显然是NO. 否则,必定为YES.强联通分量缩成一个DAG,若某点的入度为零,则答案要算上它的. #include <iostream> #inclu ...

  9. grunt-nodemon参数配置

    grunt-nodemon参数配置 nodemon0.2.0版本后参数名称做了较大改动,调整了下nodemon的参数配置,有需要的同学可以参考下: 1 2 3 4 5 6 7 8 9 10 11 12 ...

  10. 薛XX后代的IQ CSU1597【循环节】或【快速幂】

    薛先生想改变后代的IQ,为此他发明了一种药,这种药有三种属性:A, B,P.他父亲的智商为X,薛先生的智商为Y,用了这种药之后,薛先生的孩子的智商就可以变为(AX+BY) mod P.后代的智商以此类 ...