Vue/React前端项目或者静态页面强制横屏显示的神秘代码，支持ios的safari浏览器

现在有个需求，就是需要网页不论是在横屏还是竖屏的时候，都按照横屏状态的页面显示，就像实现ios上的锁定横竖屏的按钮一样的效果。原本通过这个按钮就可以实现的功能，可是有些人就是不会用，好吧，满足你。

下面是全部代码：

<div id="screen">
	<div id="main">强制横屏
		 <div class="top"></div>
	</div>
</div>
#screen {
	position: fixed;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	background-color:rgb(228, 180, 180);
	overflow: hidden
}


@media screen and (orientation: portrait) {
	/*竖屏*/
	#main {
		position: absolute;
		width: 100vh;
		height: 100vw;
		top: 0;
		left: 100vw;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		transform: rotate(90deg);
		transform-origin: 0% 0%;
		border: 1px solid red;
		background: yellow;
	}
	.top{
		width: 100%;
		height: 60px;
		background: red;
	}
}

@media screen and (orientation: landscape) {
	/*手机开启横屏*/
	#main  {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		border: 1px solid red;
		background:deepskyblue;
		
	}
	.top{
		width: 100%;
		height: 60px;
		background: lightskyblue;
	}
}

因为我的是vue3项目，所以修改了一下代码：

#app {
    position: fixed;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

@media screen and (orientation: portrait) {
    /*竖屏*/
    #app {
        position: absolute;
        width: 100vh;
        height: 100vw;
        top: 0;
        left: 100vw;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        transform-origin: 0% 0%;
    }
    .top {
        width: 100%;
        height: 60px;
    }
}

@media screen and (orientation: landscape) {
    /*手机开启横屏*/
    #app {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
    }
    .top {
        width: 100%;
        height: 60px;
    }
}

这段代码的作用是通过CSS媒体查询和transform属性来控制页面在**竖屏（Portrait）和横屏（Landscape）**模式下的布局和样式。以下是代码的详细解释：

---

1. 基础样式

#app {
    position: fixed;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

• #app 是页面的根容器。
• position: fixed; 使容器固定在视口中，不随页面滚动。
• width: 100%; height: 100%; 让容器占满整个视口。
• padding: 0; margin: 0; 去除默认的内边距和外边距。
• overflow: hidden; 隐藏超出容器的内容。

---

2. 竖屏模式（Portrait）

@media screen and (orientation: portrait) {
    /*竖屏*/
    #app {
        position: absolute;
        width: 100vh;
        height: 100vw;
        top: 0;
        left: 100vw;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        transform-origin: 0% 0%;
    }
    .top {
        width: 100%;
        height: 60px;
    }
}

• @media screen and (orientation: portrait)：这是一个媒体查询，当设备处于竖屏模式时生效。
• #app 的样式调整 ：
  • position: absolute;：将容器从fixed改为absolute，以便通过transform进行旋转。
  • width: 100vh; height: 100vw;：将容器的宽度设置为视口高度（100vh），高度设置为视口宽度（100vw），这是因为旋转后宽度和高度会互换。
  • top: 0; left: 100vw;：将容器向右移动一个视口宽度的距离（100vw），这样旋转后容器会回到正确的位置。
  • transform: rotate(90deg);：将容器顺时针旋转90度，模拟横屏效果。
  • transform-origin: 0% 0%;：设置旋转的基准点为左上角（0% 0%）。
• .top 的样式 ：
  • 这是一个顶部栏的样式，宽度为100%，高度为60px。

---

3. 横屏模式（Landscape）

@media screen and (orientation: landscape) {
    /*手机开启横屏*/
    #app {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
    }
    .top {
        width: 100%;
        height: 60px;
    }
}

• @media screen and (orientation: landscape)：这是一个媒体查询，当设备处于横屏模式时生效。
• #app 的样式调整 ：
  • position: absolute;：将容器从fixed改为absolute。
  • top: 0; left: 0;：将容器定位到视口的左上角。
  • width: 100vw; height: 100vh;：让容器占满整个视口。
• .top 的样式 ：
  • 顶部栏的样式与竖屏模式一致，宽度为100%，高度为60px。

---

4. 代码的作用

• 这段代码的主要目的是在竖屏模式 下，通过旋转页面（rotate(90deg)）来模拟横屏的效果。
• 在横屏模式下，页面保持正常布局。
• 通过媒体查询，代码能够根据设备的屏幕方向动态调整布局。

---

5. 可能的问题

• 兼容性问题 ：transform: rotate(90deg); 在某些旧浏览器中可能不支持，需要使用浏览器前缀（如-webkit-transform）。
• 布局错乱：如果页面内容较多或复杂，旋转后可能会导致布局错乱，需要进一步调整样式。
• 性能问题：频繁的旋转和布局调整可能会影响页面性能，尤其是在低性能设备上。

---

6. 适用场景

• 这段代码适用于需要在竖屏模式下强制横屏显示的场景，例如某些游戏或视频播放器。
• 如果你只是希望禁止页面旋转，可以通过更简单的方式实现（如设置meta标签或使用JavaScript锁定屏幕方向）。

如果你是pwa程序的话，还有一种方式，但是在ios上不生效哦。

在 PWA（Progressive Web App）中，如果你想 只允许横屏模式（landscape） ，可以使用 HTML meta 标签、CSS、JavaScript 监听、Web App Manifest 配置等方式。

---

方法 1：Web App Manifest 配置

在 manifest.json（PWA 配置文件）中，添加 orientation 设置：

{
  "name": "My PWA",
  "short_name": "PWA",
  "display": "standalone",
  "orientation": "landscape"
}

🔹 作用：

• orientation: "landscape"：强制 PWA 运行时只允许 横屏。

🚀 适用场景 ： ✅ PWA 安装后生效 ，但浏览器访问仍可旋转。

---

方法 2：CSS 限制旋转

@media screen and (orientation: portrait) {
  body {
    transform: rotate(90deg);
    transform-origin: center center;
    width: 100vh;
    height: 100vw;
    overflow: hidden;
    position: fixed;
    top: 50%;
    left: 50%;
    background-color: black;
  }
}

🔹 作用：

• 当设备变为 竖屏 时，强制旋转页面 90 度，始终保持横屏。

🚀 适用场景 ： ✅ 所有浏览器生效，但可能影响 UX。

---

方法 3：JavaScript 监听 orientationchange

在 main.js 或 App.vue 里：

window.addEventListener("orientationchange", function() {
  if (window.orientation === 0 || window.orientation === 180) {
    alert("请横屏使用！");
    document.body.style.transform = "rotate(90deg)";
    document.body.style.width = "100vh";
    document.body.style.height = "100vw";
  } else {
    document.body.style.transform = "";
    document.body.style.width = "";
    document.body.style.height = "";
  }
});

🔹 作用：

• 监听屏幕方向变化 ，如果检测到竖屏（window.orientation === 0），就提醒用户并强制旋转页面。

🚀 适用场景 ： ✅ 适用于 Web 浏览器，但仍可手动旋转设备绕过。

---

方法 4：结合 Vite PWA 插件

如果你用的是 vite-plugin-pwa，可以在 vite.config.js 里设置：

import { defineConfig } from 'vite';
import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig({
  plugins: [
    VitePWA({
      manifest: {
        orientation: "landscape"
      }
    })
  ]
});

🔹 作用：

• 直接在 vite.config.js 里配置 PWA，打包时自动应用 orientation: landscape。

🚀 适用场景 ： ✅ 适用于 Vite + PWA 项目。

---

方法 5：WebView 限制（适用于 App 内 PWA）

如果你的 PWA 运行在 WebView （如 Tauri、uni-app），可以禁用竖屏模式。

Tauri 配置

在 tauri.conf.json 里：

{
  "tauri": {
    "windows": [
      {
        "resizable": false,
        "fullscreen": false
      }
    ]
  }
}

🔹 作用：防止窗口调整大小，间接禁止旋转。

uni-app 配置

在 manifest.json 里：

{
  "app-plus": {
    "screenOrientation": "landscape-primary"
  }
}

🔹 作用：

• landscape-primary：仅允许横屏。

---

最佳方案

方法	适用场景	适用性	备注
manifest.json	PWA 安装后	🌟🌟🌟🌟🌟	PWA 安装后才生效，浏览器访问无效
CSS	适用于 Web	🌟🌟🌟	简单有效，但可能影响 UX
JS 监听	适用于 Web	🌟🌟🌟🌟	动态监听，但不能完全防止旋转
vite-plugin-pwa	Vite 项目	🌟🌟🌟🌟🌟	推荐 Vite PWA 项目使用
WebView 配置	App 内 WebView	🌟🌟🌟🌟🌟	适用于 Tauri、uni-app 等 App WebView

推荐最佳组合：

✅ PWA 项目（安装后生效） → 方法 1（manifest.json）

✅ 普通 Web 页面 → 方法 2（CSS）+ 方法 3（JS 监听）

✅ App 内 WebView（如 Tauri、uni-app） → 方法 5（WebView 配置）

这样可以最大程度地保证 PWA 只能横屏运行！🚀