如何为 iPhone 设置正确处理旋转的视口元标记？

在移动设备中，页面旋转是比较常见的情况，因此需要正确设置视口元标记以适应不同的屏幕方向。

原理

视口元标记（Viewport Meta Tag）是 meta 标签之一，用来控制移动设备浏览器的视图展示。通过设置不同的属性值，可以控制页面的大小、缩放、方向等。设置正确的视口元标记可以确保页面在不同设备、不同视图下显示效果一致，提供更好的用户体验。

步骤

以下是设置正确的视口元标记的步骤：

1. 在 HTML 文件的 head 标签中添加视口元标记，例如：

   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
   

   • content 属性中的 width=device-width 表示页面宽度等于设备宽度，适应不同的屏幕尺寸。
   • initial-scale=1.0 表示页面的初始缩放比例。
   • user-scalable=no 表示禁止用户手动缩放页面。

2. 设置 CSS 样式表，以保证页面元素正确响应旋转事件。

   body {
       -webkit-text-size-adjust: none; /* 禁止字号调整 */
       -webkit-touch-callout: none; /* 禁止长按链接弹出菜单 */
       -webkit-user-select: none; /* 禁止选中文本 */
   }
   
   /* 以下为针对 iPhone 端的简单样式 */
   @media only screen and (max-device-width: 480px) {
       body {
           -webkit-text-size-adjust: none;
           -webkit-touch-callout: none;
           -webkit-user-select: none;
           -webkit-transform-origin: 0 0; /* 设置旋转中心点为左上角 */
           transform-origin: 0 0;
       }
   
       /* 竖屏样式 */
       @media only screen and (orientation: portrait) {
           body {
               -webkit-transform: rotate(0deg);
               transform: rotate(0deg);
           }
       }
   
       /* 横屏样式 */
       @media only screen and (orientation: landscape) {
           body {
               -webkit-transform: rotate(-90deg);
               transform: rotate(-90deg);
           }
       }
   }
   

   • -webkit-text-size-adjust 用来禁止字号调整，保证页面元素不会因字号大小变化而布局错乱。
   • -webkit-touch-callout 用来禁止长按链接弹出菜单。
   • -webkit-user-select 用来禁止选中文本。
   • transform-origin 用来设置旋转中心点位置。
   • @media 用来设置设备宽度和方向对应的样式。

参考资料

1. MDN Web 文档：Viewport meta tag
2. 想让网页在移动端变得更友好？请务必收藏这份移动端 Web 开发指南！