iOS设备上CSS zoom属性响应式失效问题求助

我在制作Dota 2网站克隆版时，采用CSS的zoom属性实现响应式布局，该方案在Android设备上运行正常，但在iOS设备的Safari及Chrome浏览器中完全失效。已知原版Dota 2网站同样使用zoom属性，因此肯定存在可行的解决办法。

已尝试的无效方案 #

1. Meta标签尝试 #

<meta name="viewport" content="width=device-width,shrink-to-fit=no" />
<meta name="viewport" content="width=device-width, initial-scale=1 shrink-to-fit=no" />

2. 战队列表堆叠列的媒体查询 #

@media screen and (max-width: 1100px) {
  zoom: 0.9;
  width: 85%;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
@media screen and (max-width: 900px) {
  zoom: 0.8;
  width: 99%;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
@media screen and (max-width: 695px) {
  zoom: 0.7;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
@media screen and (max-width: 595px) {
  zoom: 0.6;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
@media screen and (max-width: 495px) {
  zoom: 0.5;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

3. 表格网格的媒体查询 #

@media screen and (max-width: 980px) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  zoom: 0.8;
  width: 100%;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
@media screen and (max-width: 1550px) {
  zoom: 0.8;
  width: 85%;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
@media screen and (max-width: 1200px) {
  zoom: 0.7;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
@media screen and (max-width: 668px) {
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-template-rows: repeat(1, minmax(0, 1fr));
  width: 100%;
}

4. 其他尝试 #

• 将媒体查询中的text-size-adjust设为none，仍无效果
• 仅在包裹整个组件的容器或父容器上使用zoom属性，未作用于所有元素

效果对比 #

• iOS最新版本（iPhone，Safari及Chrome浏览器）：
  
• Android最新版本（Google Chrome浏览器）：
  

从图中可见，zoom属性在Android上表现完美，但在iOS上未达预期。若需更多信息可随时提供，恳请给出解决方案。

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