Media Queries在iOS设备失效但Android正常的问题求助

问题现象 #

使用Media Queries实现的移动端响应式布局，在Chrome移动端模拟器、Android设备上显示符合预期，但在iOS设备的Safari/Chrome浏览器中出现两个问题：

1. 元素错位
2. 指定字体未生效，显示默认字体
   调整viewport标签后无改善，怀疑iOS存在viewport识别问题。

附原代码片段 #

HTML头部 #

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/static/style.css">
    ...
</head>

媒体查询CSS #

@media only screen and (max-width: 600px) {
  body {
    background-size: cover; /* Ensure the background covers the entire body */
    padding: 10px; /* Adjust padding for better spacing on small screens */
  }

  .wrapper {
    max-width: 100%;
  }

  p {
    padding: 0; /* Remove padding for paragraphs on small screens */
  }

  p:tiny,
  p:medium {
    padding-right: 10px;
    padding-left: 10px;
  }

  #tag-container,
  .tag {
    margin: 5px 2px; /* Adjust margins for tags on small screens */
  }

  .modal-container {
    padding: 10px; /* Adjust padding for modals on small screens */
  }

  .card {
    max-width: 100%; /* Make sure cards take up full width on small screens */
  }
}

解决方案 #

一、解决元素错位问题（iOS Viewport与布局兼容） #

iOS确实存在viewport的特殊处理逻辑，尤其是旧版本系统的自动缩放、宽度计算偏差问题，可按以下步骤修复：

1. 优化Viewport标签
   补充完整的viewport属性，禁用自动缩放和自适应收缩，避免iOS浏览器篡改布局宽度：

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

   • shrink-to-fit=no：解决iOS 9+浏览器自动缩放适配的问题
   • user-scalable=no：禁止用户缩放，避免触发布局偏移

2. 全局统一盒模型
   iOS浏览器对盒模型的计算可能存在差异，添加全局样式确保padding/margin不会撑开元素宽度：

   * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
   }
   

   这能避免.wrapper、.card等元素因padding导致宽度超出视口。

3. 增强媒体查询兼容性
   为媒体查询添加webkit前缀，兼容旧版iOS Safari：

   @media only screen and (max-width: 600px),
          only screen and (-webkit-max-device-width: 600px) {
     /* 原有媒体查询样式 */
   }
   

4. 消除横向滚动触发的错位
   给body添加横向溢出隐藏，防止页面出现横向滚动条导致元素偏移：

   body {
     overflow-x: hidden;
   }
   

二、解决字体不显示问题 #

iOS对自定义字体的加载和渲染有特定要求，可按以下方式排查修复：

1. 确保字体格式完整且路径正确
   iOS支持TTF、OTF、WOFF2格式，需在@font-face声明中包含适配格式，同时检查字体文件路径是否与CSS文件的相对路径匹配：

   @font-face {
     font-family: 'YourCustomFont';
     src: url('../fonts/your-font.woff2') format('woff2'),
          url('../fonts/your-font.woff') format('woff'),
          url('../fonts/your-font.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
   }
   

2. 优化字体渲染属性
   添加webkit专属的字体平滑属性，确保iOS上字体显示清晰且优先加载自定义字体：

   body {
     font-family: 'YourCustomFont', sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
   

   注意：font-family需将自定义字体放在首位，避免系统字体优先替换。

3. 检查字体加载权限
   如果字体文件放在CDN或跨域服务器，需确保服务器配置了CORS允许跨域加载；本地字体则需确认文件存在且路径正确。

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