检测移动端横竖屏的核心方法有三种：使用 screen.orientation api、matchmedia 查询以及监听 orientationchange 或 resize 事件。1. screen.orientation api 提供了详细的方向类型信息，如 portrait-primary 和 landscape-primary，但兼容性较差；2. matchmedia 方法通过 css media queries 检测屏幕方向，适用于响应式设计；3. 监听 orientationchange 事件可精准捕捉方向变化，而 resize 事件需节流处理以优化性能。为提升兼容性，建议结合特性检测与 fallback 方案，优先使用 screen.orientation，不支持时回退至 matchmedia 或 window.innerwidth/innerheight 判断，并同时监听 orientationchange 和 resize 事件以覆盖更多浏览器环境。
检测 JavaScript 中的移动端横竖屏，核心在于监听 orientationchange 事件或者使用 matchMedia 查询。前者更直接，后者在某些情况下更灵活。
检测屏幕方向，这三种技巧各有千秋，看你的具体需求了。
为什么需要检测屏幕方向？
移动设备横竖屏切换是很常见的用户行为，针对不同的屏幕方向进行适配，可以极大地提升用户体验。例如，在横屏模式下，可以展示更多的内容，或者调整布局以适应更宽的屏幕。如果你的网站或应用对屏幕方向不敏感，用户可能会感到不便，影响留存率。
有几种方法可以实现这个目标。最常见的是使用 window.orientation 属性，但这已经被弃用了。取而代之的是使用 screen.orientation API 或者 matchMedia 查询。screen.orientation 提供了更详细的方向信息，例如 portrait-primary、portrait-secondary、landscape-primary 和 landscape-secondary。matchMedia 则允许你根据 CSS media queries 来检测屏幕方向，这在响应式设计中非常有用。
下面是一个使用 matchMedia 的例子：
function detectOrientation() { if (window.matchMedia("(orientation: portrait)").matches) { console.log("Portrait mode"); // 竖屏模式下的处理逻辑 } else if (window.matchMedia("(orientation: landscape)").matches) { console.log("Landscape mode"); // 横屏模式下的处理逻辑 }}// 初始检测detectOrientation();// 监听屏幕方向变化window.addEventListener("resize", detectOrientation);
这段代码首先定义了一个 detectOrientation 函数，该函数使用 matchMedia 来检测当前屏幕方向。然后，它使用 addEventListener 监听 resize 事件，以便在屏幕方向改变时重新检测。注意，resize 事件在某些情况下可能会频繁触发，所以最好进行节流处理，避免性能问题。
screen.orientation API 的优势与局限？
screen.orientation API 提供了更精确的屏幕方向信息，但兼容性不如 matchMedia。老版本的浏览器可能不支持这个 API。
使用 screen.orientation 的一个例子：
AGI-Eval评测社区
AI大模型评测社区
63 查看详情
function detectOrientation() { if (screen.orientation) { console.log("Orientation:", screen.orientation.type); // 根据 screen.orientation.type 进行处理 } else { // 兼容旧版本浏览器 if (window.innerWidth > window.innerHeight) { console.log("Landscape mode (fallback)"); } else { console.log("Portrait mode (fallback)"); } }}// 初始检测detectOrientation();// 监听屏幕方向变化window.addEventListener("orientationchange", detectOrientation);
这段代码首先检查 screen.orientation 是否存在。如果存在，它会输出 screen.orientation.type，例如 portrait-primary 或 landscape-primary。如果不存在，它会使用 window.innerWidth 和 window.innerHeight 来判断屏幕方向，这是一个兼容旧版本浏览器的 fallback 方法。
orientationchange 事件是专门用于监听屏幕方向变化的事件，在支持的浏览器中，它比 resize 事件更可靠。
如何处理不同浏览器的兼容性问题？
兼容性问题是前端开发中永远绕不开的话题。对于屏幕方向检测，最好的策略是 feature detection 和提供 fallback 方案。
首先，使用 typeof screen.orientation !== 'undefined' 来检测 screen.orientation API 是否存在。如果不存在，可以使用 matchMedia 或者 window.innerWidth 和 window.innerHeight 来进行检测。
其次，考虑到不同浏览器对 orientationchange 事件的支持程度不同，可以同时监听 resize 事件，并在 resize 事件处理函数中进行节流处理，避免性能问题。
最后，可以使用 polyfill 来为老版本的浏览器提供 screen.orientation API 的支持。但需要注意的是，polyfill 可能会增加代码体积，所以需要权衡利弊。
function detectOrientation() { let orientation = "unknown"; if (screen.orientation && screen.orientation.type) { orientation = screen.orientation.type; } else if (window.matchMedia("(orientation: portrait)").matches) { orientation = "portrait"; } else if (window.matchMedia("(orientation: landscape)").matches) { orientation = "landscape"; } else { orientation = window.innerWidth > window.innerHeight ? "landscape (fallback)" : "portrait (fallback)"; } console.log("Current orientation:", orientation); // 根据 orientation 进行处理}// 初始检测detectOrientation();// 监听屏幕方向变化window.addEventListener("orientationchange", detectOrientation);window.addEventListener("resize", function() { // 节流处理 setTimeout(detectOrientation, 200);});
这段代码综合使用了 screen.orientation、matchMedia 和 window.innerWidth/innerHeight，并同时监听了 orientationchange 和 resize 事件，以最大限度地提高兼容性。同时，对 resize 事件进行了节流处理，避免了性能问题。
以上就是js如何检测移动端横竖屏 判断屏幕方向的3种检测技巧！的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/260902.html
微信扫一扫 
支付宝扫一扫 
