判断横屏竖屏（三种）

在做移动端页面的时候经常会遇到需要判断横屏还是竖屏。下面将目前已知的通过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

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

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

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);

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

orientation有4个值：0,90，-90,180

值为0和180的时候为竖屏（180为倒过来的竖屏）；

90和-90时为横屏（-90为倒过来的竖屏模式）；

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

# 判断  # 横屏  # 竖屏  # 使用JavaScript判断手机浏览器是横屏还是竖屏问题  # Android判断屏幕是横屏或是竖屏的简单实现方法  # 基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码  # 倒过来  # 就会  # 三种  # 方法来  # 经常会  # 值为  # 判断是否  # 改变了  # link  # rel  # lt  # media  # orientation  # portrait  # stylesheet  # href  # JS  # strong  # CSS  # gt 

相关文章： 如何快速查询网站的真实建站时间？  内部网站制作流程,如何建立公司内部网站？  在线流程图制作网站手机版,谁能推荐几个好的CG原画资源网站么？  建站主机选购指南：核心配置优化与品牌推荐方案  学校建站服务器如何选型才能满足性能需求？  如何选择CMS系统实现快速建站与SEO优化？  如何在沈阳梯子盘古建站优化SEO排名与功能模块？  如何在IIS中配置站点IP、端口及主机头？  实现点击下箭头变上箭头来回切换的两种方法【推荐】  成都网站制作报价公司,成都工业用气开户费用？  已有域名建站全流程解析：网站搭建步骤与建站工具选择  c# await 一个已经完成的Task会发生什么  如何在阿里云虚拟服务器快速搭建网站？  南京网站制作费用,南京远驱官方网站？  猪八戒网站制作视频,开发一个猪八戒网站，大约需要多少？或者自己请程序员，需要什么程序员，多少程序员能完成？  建站主机服务器选购指南：轻量应用与VPS配置解析  建站主机选哪种环境更利于SEO优化？  免费网站制作模板下载,除了易企秀之外还有什么H5平台可以制作H5长页面，最好是免费的？  如何解决ASP生成WAP建站中文乱码问题？  建站之星如何配置系统实现高效建站？  建站之星后台密码遗忘？如何快速找回？  建站之星图片链接生成指南：自助建站与智能设计教程  javascript中的try catch异常捕获机制用法分析  公司网站建设制作费用,想建设一个属于自己的企业网站，该如何去做？  北京网页设计制作网站有哪些,继续教育自动播放怎么设置？  南阳网站制作公司推荐,小学电子版试卷去哪里找资源好？  在线教育网站制作平台,山西立德教育官网？  Python多线程使用规范_线程安全解析【教程】  网站制作费用多少钱,一个网站的运营，需要哪些费用？  建站IDE高效指南：快速搭建+SEO优化+自适应模板全解析  广州美橙建站如何快速搭建多端合一网站？  简历在线制作网站免费版,如何创建个人简历？  建站之星体验版：智能建站系统+响应式设计，多端适配快速建站  建站之星后台管理系统如何操作？  大型企业网站制作流程,做网站需要注册公司吗？  公司网站制作需要多少钱,找人做公司网站需要多少钱？  建站之星如何优化SEO以实现高效排名？  如何制作一个表白网站视频,关于勇敢表白的小标题？  如何有效防御Web建站篡改攻击？  家具网站制作软件,家具厂怎么跑业务？  香港服务器网站推广：SEO优化与外贸独立站搭建策略  阿里云网站制作公司,阿里云快速搭建网站好用吗？  黑客入侵网站服务器的常见手法有哪些？  娃派WAP自助建站：免费模板+移动优化，快速打造专业网站  哪家制作企业网站好,开办像阿里巴巴那样的网络公司和网站要怎么做？  威客平台建站流程解析：高效搭建教程与设计优化方案  如何用PHP快速搭建高效网站？分步指南  宿州网站制作公司兴策,安徽省低保查询网站？  ,交易猫的商品怎么发布到网站上去？  电影网站制作价格表,那些提供免费电影的网站，他们是怎么盈利的？