Safari Responsive Design Mode CSS-Medienabfrage 'Gerät' nicht angewendet

Question

Ich habe den Responsive Design-Modus von Safari verwendet, während ich eine Responsive-Website entwickle und debugge, an der ich gerade arbeite.

Wenn auf jedem mobilen Gerät einstellen (zB jede iPhone oder iPad), Ich habe eine Medien Abfrage wie diese

@media screen and (max-device-width: 480px) { 
    .disappear-on-device { 
     display: none; 
    } 
} 

Feuer und Stilelemente mit der disappear-on-device Klasse und auf Geräte mit einer Breite < = 480 erwartet entsprechend, da der RDM spezifisch eingestellt werden kann, um ein iPhones und iPads zu emulieren.

Das Styling ist jedoch nicht passiert. Der Chrome Responsive Design-Modus scheint dies gut zu handhaben. Ich konnte nichts in den Safari-Einstellungen finden.

Fehle ich hier etwas? Gibt es eine Möglichkeit, Safari RDM wie ein echtes Gerät zu gestalten?

Answer 1

device-width, zusammen mit seinen Geschwistern min-device-width und max-device width wurden veraltet und aus den Standards entfernt.

Sie sollten einfach width, min-width und max-width verwenden, die basierend auf der Größe des Ansichtsfensters berechnet werden. Bei den meisten Mobilgeräten führen width, min-width und max-width zu demselben Nettoergebnis wie device-width, min-device-width und max-device-width.

Hier finden Sie Informationen zur Einstellung von device-width. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/device-width

Hier ist die neue Spezifikation, die nicht mehr device-width enthält. https://www.w3.org/TR/mediaqueries-4/#width