移动端横屏提示插件

最新推荐文章于 2023-03-27 09:51:11 发布

caicai1171523597

最新推荐文章于 2023-03-27 09:51:11 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/caicai1171523597/article/details/103629453

版权

本文介绍了一种在移动端页面中实现横屏提示的方法，通过加载特定的JavaScript代码，可根据设备方向显示提示信息，引导用户调整屏幕方向以获得更佳的浏览体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时候移动端的页面在横屏模式下布局会不友好，比较强硬的办法就是给个横屏提示，通过加载一段js，达到移动端横屏提示，效果如下

landscape.js

/* 横竖提示处理
    * isVertical：不传默认为false，即显示竖屏提示，（false: 提示用户横屏， true：提示用户竖屏）
    */
(function landscape(config) {
    if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
        var isVertical = Number(document.getElementById("customerLandscape").getAttribute('isVertical')) || 0;
        var showWay = isVertical ? "@media scr