Safariで@mediaが正しく解釈されないiPhone

Question

私のウェブサイトやデスクトップ画面では、本文はページの一番上にあるべきではありませんが、iPhoneの場合はテキストが一番上になければなりません。オン/オフを表示するには、いくつかの空の段落を持つクラスを作りました - > iPhoneはこのクラスを表示しません。以下のコードは、私のiPhone 6+でSafariを使っているわけではありませんが、iPhone 6+やFireFoxでは完璧です！

HTMLコード：

 <div class="display-breaks"> 
     <p> </p> 
     <p> </p> 
     </div> 

CSS ....

// Set Defaults-> display the paragraphs 
.display-breaks { display: block; } 

..........

// hide the paragraphs's 
@media only screen and (max-width: 480px){   
    .display-breaks { display: none !important; } 
} 

私は自分のデスクトップ上で遊んでいる場合ウェブサイトの幅によって、テキストの上部が上下にジャンプしているので、何とか表示：オン/オフが機能しています。

Answer 1

最大幅を599ピクセルに拡大してみてください。

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

}

UPDATE：あなたがメタビューポートタグを持っていますか？私がiPhoneタグを追加した直後にSafariを使ってiPhone 7+を動かしました。

<meta name="viewport" content="width=device-width, initial-scale=1.0">