Safari与Chrome@media媒体查询断点不一致，如何实现同Chrome一致？

算力阿峰

2026-5-20

解决Safari与Chrome媒体查询表现不一致的问题

哈哈，这个问题我之前在适配Safari的时候也踩过坑！本质上是Safari在视口宽度的像素舍入计算上和Chrome存在差异——Safari可能会把1280px的实际显示宽度，因为设备像素比（DPR）的换算，计算成略小于1280的浮点数，从而误触发max-width: 1279px的媒体查询。下面给你几个靠谱的解决办法：

调整媒体查询的临界值（最直接方案）
把max-width: 1279px改成max-width: 1279.98px。这个微小的数值调整可以覆盖Safari的像素舍入误差，同时不会影响Chrome的正常表现——Chrome在1280px时视口宽度会精确计算为1280，大于1279.98，不会触发该媒体查询。
示例代码：
```
@media only screen and (max-width: 1279.98px) {
  /* 你的小屏幕样式 */
}
```
反向使用min-width定义断点
换一种思路，默认写1279px及以下的样式，然后用min-width: 1280px来定义大屏幕的样式。这种方式可以避开Safari的舍入问题，因为我们是从大屏幕往下适配：
示例代码：
```
/* 默认是1279px及以下的样式 */
.your-element {
  padding: 1rem;
}

/* 1280px及以上的大屏幕样式 */
@media only screen and (min-width: 1280px) {
  .your-element {
    padding: 2rem;
  }
}
```
检查并修正视口元标签
不正确的视口设置也可能导致Safari的宽度计算异常。确保你的HTML头部包含正确的视口标签，让浏览器准确识别设备的实际宽度：
示例代码：
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```