iPhone上CSS max-width表现异常问题求助

问题根源分析 #

iPhone 13 Pro Max 的逻辑分辨率为 428px（竖屏）/ 926px（横屏），DPR 为 3。你遇到的问题核心原因通常是 viewport 元标签未正确配置，导致浏览器自动缩放视口，使媒体查询获取的宽度并非设备实际逻辑宽度；其次是媒体查询的边界值设置（刚好等于926px）可能触发浏览器的判定偏差。

具体解决步骤 #

1. 强制设置正确的 Viewport
   在页面 <head> 中必须添加以下元标签，确保视口与设备逻辑宽度绑定，避免浏览器自动缩放：

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

   • width=device-width：将视口宽度设置为设备逻辑宽度
   • initial-scale=1.0：锁定初始缩放比例，避免浏览器默认缩放导致视口宽度偏移
   • user-scalable=no：禁止用户手动缩放，防止视口宽度变化

2. 调整媒体查询的边界逻辑
   避免使用刚好等于目标宽度的判定，建议将桌面模式设为默认样式，移动端用小于目标宽度的媒体查询覆盖：

   /* 桌面端默认样式（宽度 ≥ 926px 时生效） */
   .desktop-layout { display: block; }
   .mobile-layout { display: none; }
   
   /* 移动端样式（宽度 < 926px 时生效） */
   @media (max-width: 925px) {
     .desktop-layout { display: none; }
     .mobile-layout { display: block; }
   }
   

   这种写法能避免边界值（926px）带来的判定歧义，确保横屏时正确触发桌面模式。

3. 针对 iOS Safari 的特殊适配
   iOS Safari 横屏时可能存在安全区域或视口微调，可结合方向判断强化媒体查询：

   @media (min-width: 926px) and (orientation: landscape) {
     /* 强制横屏时应用桌面样式 */
     .desktop-layout { display: block !important; }
     .mobile-layout { display: none !important; }
   }
   

4. 真机视口宽度排查
   添加一段 JavaScript 代码，实时查看真机上的实际视口宽度，确认问题所在：

   // 在页面加载和 resize 时打印视口宽度
   const logViewportWidth = () => {
     console.log('当前视口宽度:', window.innerWidth);
   };
   window.addEventListener('load', logViewportWidth);
   window.addEventListener('resize', logViewportWidth);
   

   使用 Safari 开发者工具连接 iPhone 查看控制台输出，确认实际宽度是否符合预期（横屏应为926px）。

内容的提问来源于stack exchange，提问作者walee