方法一:用resize事件来判断,利用屏幕的宽高比,来判断横竖屏 (兼容性较好)

(function () {

        var updateOrientation = function () {

            var orientation = (window.innerWidth > window.innerHeight)? 'landscape' : 'portrait';
if(orientation === 'landscape'){
//横屏
}
else if(orientation === 'portrait'){
//竖屏
}
}
var init = function () {
updateOrientation();
window.addEventListener('resize',updateOrientation,false);
}
window.addEventListener('DOMContentLoaded',init,false)
})()

方法二:css3媒体查询

@media all and ( orientation: portrait ){

       //竖屏
} @media all and ( orientation: landscape ){ //横屏
}

方法三:orientationChange事件  (我在谷歌测试的,弹出来undefined,这个不建议用,兼容性不好)

window.addEventListener("orientationchange", function() {
  
    alert(window.orientation);
}, false);

终结:需要操作js的用方法一,只需要改改样式的用方法二

js移动端横竖屏检测的更多相关文章

  1. 【原】js检测移动端横竖屏

    摘要:上周做了一个小项目,但是要放到我们的app上,然而需要横竖屏使用不同的样式.横屏一套,竖屏一套.调用了手机APP那里的api,可是他们那里ios和安卓返回的不一样. 各种头疼.于是用了css3的 ...

  2. Hammer.js移动端触屏框架的使用

    hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove. ...

  3. JS判断手机横竖屏

    在移动端开发时,有时候需要判断手机的横竖屏,那么就需要用到window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态. 屏幕方向对应的window.orientat ...

  4. js移动端触屏事件

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  5. js 判断手机横竖屏的实现方法(不依赖任何其他库)

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. JS检测移动端横竖屏

    (function () {                                var supportOrientation = (typeof window.orientation == ...

  7. JS移动端滑屏事件

    来看看在pc上面的几个事件:onmousedown,onmousemove,onmouseup 我相信大家对这几个事件一定不陌生,第一个onmousedown表示鼠标按下,第二个onmousemove ...

  8. JS禁止横竖屏切换,强制横竖屏显示

    js判断屏幕横竖屏: function orient() { //alert('gete'); if (window.orientation == 0 || window.orientation == ...

  9. 移动端Web开发如何处理横竖屏

    <!Doctype html> <html> <head> <meta charset="utf-8"> <meta id=& ...

随机推荐

  1. Swift2.2 看完这篇博客 你不想懂也会懂得----二叉树

    一:初衷 我自己也好奇,为什么莫名其妙的想起写这个,其实数据里面包含的结构和逻辑我自己觉得才是最原始经典的,最近也在学swift,就向着利用swift整理一些二叉树.自己刚开始的时候也是用OC看着别的 ...

  2. Asp.net mvc 知多少(七)

    本系列主要翻译自<ASP.NET MVC Interview Questions and Answers >- By Shailendra Chauhan,想看英文原版的可访问http:/ ...

  3. http状态码及解释

    简单版: 100  Continue   继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息 200  OK         正常返回 ...

  4. 在vim中,使用可视化拷贝(剪切)粘贴文本

    1  定位光标到你想要开始剪切的位置 2 按v选择字符(按V是选择整行) 3 移动光标到你想要结束剪切的位置 4 按d是为了剪切(按y是为了拷贝) 5 移动光标到你想要粘贴的位置 6 按P是在光标之前 ...

  5. web移动端Fixed在Input获取焦点时ios下产生的BUG及处理

    1.现象 可以看到下面两张图,图1搜索框为fixed固定在顶部,滚动没有任何问题. 图2当光标进入搜索框时,ios自作聪明的把光标定位到中间,并且fixed属性被自动修改成了absolute.此时注意 ...

  6. Redis 安装与初体验

    一.Redis简介 Redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(s ...

  7. Overlay网络技术之vxvlan

    了解云计算数据中心网络架构的过程中,看到这么一篇不错的关于大二层技术overlay的文章,转载分享给大家! 一. 传统网络面临的问题 随着企业业务的快速扩展需求,IT做为基础设施,快速部署和减少投入成 ...

  8. C#的for循环使用方法

    for循环是程序语言开发中常见的技法之一,这类循环可以执行指定的次数,并维护它自己的计数器,要定义for循环,需要下述信息:1.初始化计数器变量的一个起始值;2.继续循环的条件,它应涉及到计数器变量; ...

  9. 普实软件:MES机器数据维护

    概述 机器数据有两个菜单,机器主数据在制造数据模块下,机器MES数据相关的设置在MES模块下,两个菜单查看的内容是一致的,但是机器主数据显示的是普通的机器,可做新增.编辑.删除操作,机器MES数据仅做 ...

  10. Bootstrap学习-环境安装

    1.<meta http-equiv="X-UA-Compatible" content="IE=edge"> 让IE运行最新的渲染模式. 2.&l ...