方法一:用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. j2se 总结

    j2se在学习第二遍的时候,感觉还是比较亲切的.

  2. Raspberry树莓派学习笔记1—基本介绍

    树莓派的简单介绍 一个名片大小的迷你个人电脑主机,还有wifi/蓝牙... 运行完整的Linux操作系统(注意关键字:完整,不是精简过的嵌入式Linux) 开源的硬件平台.与普通主机不同的是,它带有简 ...

  3. 【android开发笔记】为Button的背景图片添加边框式样式效果

    现在做的项目遇到一个问题,设计给过来的图片只有一种状态,但是实现的需求是要求有两个状态,另一种选状态为图片背景加边框.如图: 刚开使用使用ImageView ,ImageViewButton 效果不是 ...

  4. Gulp自动构建Web前端程序

    这两天在一个朋友在项目上碰到了一个这样的问题,在运营过程中,用户在浏览器上对某个表单进行数据提交时,需要引入新的平台接口数据的业务,通过评估,开发团队马上修改了相关后台代码和部分的前端脚本代码,通过简 ...

  5. 《JavaScript DOM 编程艺术》

    前几天京东买了一本书,在豆瓣上好评如潮,买下了啃一啃,书名<JavaScript DOM 编程艺术>,在好好深造一下javaScript.一边啃,一边敲.当然应该要做好笔记.一些简单的就看 ...

  6. 纯css实现京东导航菜单

    纯CSS代码实现导航菜单,推荐在chrome预览! 预览请点击这里:mygithub <!doctype html> <html lang="en"> &l ...

  7. ASP.NET通用权限框架 权限管理系统源码jquery 精美UI源码

    软件技术开发,合作请联系QQ:858-048-581 开发工具 VS2010 .sql2005.2008等(在Sql server数据执行脚本即可)  VS2010 打开保证本地运行成功(数据库.源代 ...

  8. 配置apache

    1. 修改httpd.conf文件 # vi  /usr/local/apache/conf/httpd.conf 1) 设置根目录的路径 根目录是指Apache存放配置文件和日志文件的目录,配置参数 ...

  9. 概念 : 用户>角色>权限 的管理(Role-Based Access Control)

    RBAC 用户管理规范 概念:每个user有多个accounts,每个account 有一个account binding,有多个roles和多个tasks 举个例子:某个用户现在manager,这是 ...

  10. angular2入门,就这一篇就够了

    背景与概念: AngularJS2 是一款开源JavaScript库,由Google维护,用来协助单一页面应用程序运行. AngularJS2 是 Angular 1.x 的升级版本,性能上得到显著的 ...