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

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel怎么实现验证码功能_Laravel集成验证码库防止机器人注册  Laravel如何处理文件上传_Laravel Storage门面实现文件存储与管理  javascript中的try catch异常捕获机制用法分析  Windows Hello人脸识别突然无法使用  HTML透明颜色代码怎么让图片透明_给img元素加透明色的技巧【方法】  Python制作简易注册登录系统  Android滚轮选择时间控件使用详解  如何在云服务器上快速搭建个人网站？  C++时间戳转换成日期时间的步骤和示例代码  Laravel如何实现API版本控制_Laravel API版本化路由设计策略  太平洋网站制作公司,网络用语太平洋是什么意思？  Win11怎么开启自动HDR画质_Windows11显示设置HDR选项  高性能网站服务器配置指南：安全稳定与高效建站核心方案  微信小程序 canvas开发实例及注意事项  Laravel集合Collection怎么用_Laravel集合常用函数详解  如何用AI一键生成爆款短视频文案？小红书AI文案写作指令【教程】  简单实现jsp分页  如何在腾讯云服务器快速搭建个人网站？  Laravel如何处理JSON字段_Eloquent原生JSON字段类型操作教程  Laravel如何使用Gate和Policy进行权限控制_Laravel权限判定与策略规则配置  如何在阿里云部署织梦网站？  重庆市网站制作公司,重庆招聘网站哪个好？  Laravel如何创建自定义中间件？（Middleware代码示例）  如何快速查询域名建站关键信息？  如何在云主机上快速搭建网站？  Windows驱动无法加载错误解决方法_驱动签名验证失败处理步骤  java获取注册ip实例  Laravel如何处理异常和错误？（Handler示例）  Laravel如何实现数据库事务？（DB Facade示例）  Python高阶函数应用_函数作为参数说明【指导】  猪八戒网站制作视频,开发一个猪八戒网站，大约需要多少？或者自己请程序员，需要什么程序员，多少程序员能完成？  Laravel如何使用Service Container和依赖注入？（代码示例）  香港服务器网站测试全流程：性能评估、SEO加载与移动适配优化  jQuery validate插件功能与用法详解  JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)  HTML5建模怎么导出为FBX格式_FBX格式兼容性及导出步骤【指南】  Laravel怎么使用Collection集合方法_Laravel数组操作高级函数pluck与map【手册】  Android 常见的图片加载框架详细介绍  佛山网站制作系统,佛山企业变更地址网上办理步骤？  安克发布新款氮化镓充电宝：体积缩小 30%，支持 200W 输出  如何在 Telegram Web View（iOS）中防止键盘遮挡底部输入框  Laravel中DTO是什么概念_在Laravel项目中使用数据传输对象(DTO)  香港服务器网站推广：SEO优化与外贸独立站搭建策略  宙斯浏览器视频悬浮窗怎么开启 边看视频边操作其他应用教程  如何在云主机快速搭建网站站点？  Laravel怎么实现一对多关联查询_Laravel Eloquent模型关系定义与预加载【实战】  nginx修改上传文件大小限制的方法  如何实现建站之星域名转发设置？  如何在阿里云虚拟机上搭建网站？步骤解析与避坑指南  Laravel如何保护应用免受CSRF攻击？（原理和示例）