CSS媒体查询在MacBook上失效，Anki图片显示变形求助

问题分析 #

1. 图片变形原因：你给img设置了固定width: 600px，MacBook的屏幕逻辑宽度（小尺寸机型通常低于1440px）不足以容纳该宽度，而max-width:85vw的优先级低于固定width，无法限制图片宽度，最终导致变形。
2. 媒体查询失效原因：
   • device-width适配逻辑不适用于Anki的WebView环境，卡片渲染的视口宽度不一定等于设备物理/逻辑宽度；
   • 原有MacBook媒体查询仅修改max-width，未覆盖原width:600px，固定宽度的CSS优先级更高，导致规则不生效。

解决方案 #

方案1：优化基础图片样式（推荐，无需依赖媒体查询）

直接用min()函数动态计算图片宽度，兼顾固定宽度需求和响应式适配：

img {
  display: block;
  margin: 10px auto -15px auto;
  /* 取600px和85vw中的较小值，自动适配不同屏幕 */
  width: min(600px, 85vw);
  height: auto;
}

宽屏设备（如iMac）上图片显示600px，MacBook或手机上自动缩小到85vw，无需额外规则即可避免变形。

方案2：修复MacBook媒体查询规则

如果必须保留媒体查询，需调整查询条件并覆盖width属性：

/* 替换原MacBook媒体查询 */
@media only screen 
  and (min-width: 1280px) 
  and (max-width: 1440px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
    img {
        width: 300px; /* 覆盖原固定宽度 */
        max-width: 100%; /* 确保不会超出容器 */
    }
}

• 改用min-width/max-width（视口宽度）替代device-width，适配Anki的WebView渲染逻辑；
• 直接设置width属性覆盖原规则，确保优先级足够。

额外优化：统一响应式逻辑

整合所有设备的适配规则，减少冗余代码：

.card {
 font-family: arial;
 font-size: 20px;
 text-align: center;
 color: black;
 background-color: white;
}

.centered-block {
    display: inline-block;
    text-align: left;
    max-width: 85vw;
}

img {
  display: block;
  margin: 10px auto -15px auto;
  width: min(600px, 85vw);
  height: auto;
}

/* iPhone 13 Pro Max 适配 */
@media only screen 
  and (device-width: 428px) 
  and (device-height: 926px) 
  and (-webkit-device-pixel-ratio: 3) {
    .centered-block {
      max-width: 90vw;
    }

    img {
      width: 90vw;
      margin-bottom: -20px;
    }
 }

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