iPhone mit Safari @media nicht korrekt interpretieren

Question

Auf meiner Website und auf einem Desktop-Bildschirm sollte der Textkörper nicht oben auf der Seite sein - aber mit dem iPhone muss der Text ganz oben stehen. Zum Ein-/Ausschalten habe ich eine Klasse mit einigen leeren Absätzen erstellt -> das iPhone sollte diese Klasse nicht anzeigen. Der Code unten funktioniert NICHT auf meinem iPhone 6+ mit Safari - aber es ist perfekt mit iPhone 6 und FireFox!

Html-Code:

 <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; } 
} 

Wenn ich um auf meinem Desktop spielen Bei der Breite der Website springt der obere Teil des Textes auf und ab - irgendwie funktioniert das Display: an/aus funktioniert.

Answer 1

Versuchen Sie, Ihre maximale Breite auf 599px zu erhöhen.

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

}

UPDATE: Haben Sie eine Meta-Darstellungsfeld-Tag? Es funktionierte mein iPhone 7+ mit Safari, nachdem ich das Meta-Tag hinzugefügt hatte.

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