メディアクエリがiPhone（SafariとChrome）で動作しない

Question

ボタンでページを作成しています。この中に矢印とテキストがあります。だから、ここでの考え方は、矢印とテキストが並んでいることです。テキストは左側にあり、右側に矢印があります。

問題は次のとおりです。私は応答性の高いアプリケーションにはうまく機能しますが、iPhoneでは機能しません（iPhoneのSafariとChromeでは動作しません）。

ボタン：

私は場合には、それはSafariのブラウザと互換性がありませんでした、（VWからパーセントまで）のサイジングユニットを変更しようとしました（それはまた、奇妙なことだろう）して、再度テストしてきました。問題はまだそこにあり、すべてはアンドロイドで大丈夫です。

メディアクエリ外CSSコード：

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

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

.subs_text { 
    font-size: 85%; 
} 

} 

ビューポートのメタタグ：ここ

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

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

メディアクエリーCSSでここ

<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搭載端末より画面サイズが小さくなる可能性があるためです。したがって、テキストをスムージングしないようにプッシュダウンすることができます。あなたの場合、私はあなたが取っているアプローチの代わりにフレックスボックスを使用します。

.yourentirebutton { 

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

} 

Answer 2

は、あなたのheadタグで<meta name="viewport" content="width=device-width, initial-scale=1">を追加してください。 https://css-tricks.com/snippets/html/responsive-meta-tag/