方法一:用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. block之---内存管理

    首先简单说下MRC和ARC MRC: 手动管理内存,需要自己去释放内存, 如果对象的引用计数器为0时对象就会被释放. 属性修饰策略:assign, retain, copy ARC: ARC是编译器特 ...

  2. 关于JavaScript中的编码和解码函数

    js对文字进行编码涉及3个函数:escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decodeURIComponent 1 ...

  3. Cassandra 学习笔记 - 1 - 关于Cassandra

    摘要 - Cassandra 的历史 Cassandra能做什么 Apache Cassandra最早是Facebook为了改进他们的Inbox搜索功能,由Avanash Lakshman和Prash ...

  4. Java包装类缓存

    1.基本概念 在jdk1.5及之后的版本中,Java在5大包装类中(Byte,Charactor,Short,Integer,Long)增加了相应的私有静态成员内部类为相应包装类对象提供缓存机制,In ...

  5. Docker入门01——Image

    1.获取镜像 2.列出镜像 3.创建镜像 3.1 修改已有镜像 3.2 使用Dockerfile创建镜像 创建Dickerfile文件 使用build来创建镜像 使用新创建的镜像来启动容器 4.移除镜 ...

  6. 【JSON学习之道】js操作JSON

    JSON (JavaScript Object Notation)一种简单的数据格式,比xml更轻巧. JSON 是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON ...

  7. [C#7] 1.Tuples(元组)

    1. 老版本代码 class Program { static void Main(string[] args) { var fullName = GetFullName(); Console.Wri ...

  8. Java Trie树

    Tire树,又叫字典树,主要是用来查找单词,词频统计的. 老规矩,直接上代码. package tireTree; public class TireTree { TireNode root; pub ...

  9. 008 Java集合浅析3

    在前面的几节里,本教程从整体架构上去把握了JDK中的集合框架,并简单分析了其中Collection组的顶级接口,知道Collection接口的常见直接子接口有List.Set和Queue,并就这三个子 ...

  10. 用Use Case获取需求的方法是否有什么缺陷,还有什么地方需要改进?

    一.用例解释 用例是一种在开发新系统或者软件改造时捕获潜在需求的技术.每个用例提供了一个或多个场景,该场景揭示了系统是如何同最终用户或其它系统交互的,从而获得一个明确的业务目标.用例要避免技术术语,取 ...