• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > 判断横屏竖屏(三种)

判断横屏竖屏(三种)

作者:mmm(⊙o⊙) 字体:[增加 减小] 来源:互联网 时间:2017-05-11

mmm(⊙o⊙)通过本文主要向大家介绍了js判断横屏竖屏,android 判断横竖屏,怎么判断手机内屏坏,怎样判断液晶屏损坏,如何判断液晶屏好坏等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

在做移动端页面的时候经常会遇到需要判断横屏还是竖屏。下面将目前已知的通过HTML,CSS,JS三种判断方法记录下来,方便以后翻阅。

1、通过在html中分别引用横屏和竖屏的样式:

  <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" rel="external nofollow" > //引用竖屏的CSS
  <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" rel="external nofollow" > //引用横屏的CSS
</div>

2、CSS中通过媒体查询的方法来判断:

@media (orientation: portrait ){
 //竖屏CSS 
}
@media ( orientation: landscape ){
 //横屏CSS 
}
</div>

3、js判断是否为横屏竖屏:

window.addEventListener("onorientationchange" in window ? orientationchange" : "resize", function() {
  if (window.orientation === 180 || window.orientation === 0) { 
   alert('竖屏状态!');
  } 
  if (window.orientation === 90 || window.orientation === -90 ){ 
   alert('横屏状态!');
  } 
 }, false);
</div>

只要用户改变了设备的查看模式,就会触发onorientationchange事件。

orientation有4个值:0,90,-90,180

值为0和180的时候为竖屏(180为倒过来的竖屏);

90和-90时为横屏(-90为倒过来的竖屏模式);

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 判断横屏竖屏(三种)

相关文章

  • 2017-05-11js select下拉联动 更具级联性!
  • 2017-05-11基于jQuery实现的打字机效果
  • 2017-05-11jquery操作select取值赋值与设置选中实例
  • 2017-05-11node.js的事件机制
  • 2017-05-11JavaScript数组和对象的复制
  • 2017-05-11详谈angularjs中路由页面强制更新的问题
  • 2017-05-11Javascript中八种遍历方法的执行速度深度对比
  • 2017-05-11数组Array的排序sort方法
  • 2017-05-11Ajax 加载数据 练习代码
  • 2017-05-11angular ng-repeat数组中的数组实例

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 详解VueJs异步动态加载块
    • Vue插件写、用详解(附demo)
    • jQuery弹出窗口简单实现代码
    • 详解angularJs模块ui-router之状态嵌套和视图嵌套
    • 基于vue.js实现侧边菜单栏
    • js实现悬浮窗效果(支持拖动)
    • JS判断指定dom元素是否在屏幕内的方法实例
    • 基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
    • js实现短信发送倒计时功能(正则验证)
    • 详解Jquery 遍历数组之$().each方法与$.each()方法介绍

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有