在开发移动端Web应用时，我们可能希望禁止用户将设备从竖屏模式切换为横屏模式。在iOS Safari浏览器中，可以通过以下几种方法实现这一目标。
1. 使用CSS媒体查询
CSS媒体查询可以根据不同的屏幕尺寸和方向来应用不同的样式。我们可以使用媒体查询来检测设备的方向，并将旋转时的样式设置为与默认样式相同。这样即使用户将设备旋转，页面的布局也不会发生变化。
示例代码如下：
@media only screen and (orientation: landscape) {
body {
/* 将旋转时的样式设置为与默认样式相同 */
width: 100vw;
height: 100vh;
overflow: hidden;
}
}2. 使用JavaScript禁止旋转
我们还可以使用JavaScript代码来禁止设备屏幕的旋转。具体做法是监听orientationchange事件，并在该事件触发时调用preventDefault方法来阻止屏幕旋转。需要注意的是，在某些移动设备上可能无法阻止屏幕旋转。
示例代码如下：
window.addEventListener('orientationchange', function(e) {
e.preventDefault();
}, false);3. 使用meta标签控制屏幕方向
我们还可以使用meta标签来控制设备屏幕的方向。具体做法是在HTML文档的head标签中添加以下代码：
-- -------------------- ---- -------
----- --------------- ---------------------------- ------------------ ------------------ ----------------- --------------------
----- ----------------------------------- --------------
----- -------------------------------------------- ----------------
----- ----------------------- -------------------------------------------
---- ---- ---
-------
------ ---- ------ --- ------------- ---------- -
---- -
---------- --------------
----------------- --- ----
------- ------
----------- -------
--------- ---------
---- --
----- --
------ ------
----------- -----
--------------------------- ------
-
-
--------以上meta标签分别用于设置视口大小、禁止缩放和开启全屏模式等功能。同时，我们还在style标签中设置了当设备旋转到横屏状态时，将页面顺时针旋转90度，并限制水平滚动条。
结语
以上是在iOS Safari中防止屏幕旋转的几种方法，每种方法都有其优缺点，需要根据具体需求来选择适合的方法。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29866