Media Query无法在Iphone上工作（Safari和Chrome）

Question

我正在创建一个带有按钮的页面，其中有一个箭头和文本。所以，这里的想法是箭头和文本并排，文本在左边，箭头在右边。

问题是：我申请响应的css在我的Android手机中运行良好，但它不适用于iPhone（而不适用于iPhone内的Safari和Chrome）。

按钮：

我试图更改大小调整单位（从vw到百分比），以防它与Safari浏览器不兼容（这也很奇怪）并再次测试。问题仍然存在，一切都在Android上没问题。

媒体查询之外的CSS代码：

.subs_arrow {
width: 13vw;
height: 5.5vh;
vertical-align: sub;
}

.subs_text {
 font-size: 9vw;
 display: inline-block;
}

这是Media Query CSS：

@media screen and (max-width: 451px) {

.subs_arrow {
  width: 40%;
  height: 80%;
  vertical-align: sub;
}

.subs_text {
  font-size: 85%;
}

}

视口元标记：

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

这是HTML：

<button class="lp6_button">
    <span id="form_pin_code_add_btn_send" class="subs_text">إشترك</span>
    <img src="./img/white-right-arrow-md.png" class="subs_arrow">
</button>

这里有什么解决方案？

Answer 1

可能是因为iPhone（特别是旧款）的屏幕尺寸比大多数Android手机都要小。因此，可以按下文本以避免产生污迹。对于您的情况，我会使用flexbox而不是您正在采用的方法。

.yourentirebutton {

    display: flex;
    justify-content: center;
    align-items: center;

}

Answer 2

尝试在<meta name="viewport" content="width=device-width, initial-scale=1">标记中添加head。您可以在此处详细了解：https://css-tricks.com/snippets/html/responsive-meta-tag/