Responsives Bild, das in Safari nicht auf 100% Breite geht (gut in Chrome)

-2

Auf meiner Website verwende ich Medienabfragen, um Elemente basierend auf der Größe des Geräts zu skalieren. Das funktioniert gut und die Größe der Elemente ist in jedem Browser (Chrome, Safari, was auch immer) perfekt.Responsives Bild, das in Safari nicht auf 100% Breite geht (gut in Chrome)

Ich habe jedoch ein großes Problem, und das ist, dass ich ein Logo-Img-Tag habe, das mit automatischer Breite beginnt, und dann, wenn auf Mobile (die Medienabfrage funktioniert, reagiert es und wendet Stile an) soll es gehen zu 100% Breite, so nimmt es die ganze Linie auf. Dies funktioniert hervorragend in Chrome und Firefox, funktioniert aber nicht in Safari.

Mit Safari dev tools kann ich sehen, dass es tatsächlich 100% Breite auf das Element anwendet, aber es berechnet nicht 100% Breite des Ansichtsfensters, sondern eine andere Zahl (nicht sicher, woher es kommt)).

Also im Wesentlichen das Problem ist, dass in Safari (und nur in Safari), wenn ich versuche, reagieren 100% Breite auf Elemente funktioniert es nicht richtig. Es wird angewendet, ist aber nicht die volle Breite des Darstellungsbereichs.

Ich habe meine Viewport-Meta-Tag und was auch immer, aber das passiert auf Desktop-und mobilen Safari, so bezweifle ich, dass es ist.

Irgendwelche Ideen?

Ich werde einige Code teilen:

.Logo 
 
    width: 100% 
 
    margin-top: 3em 
 
    margin-bottom: 2em 
 
    display: block 
 
    text-align: center 
 

 
    @media (min-width: mobile-nav-break) 
 
    margin-bottom: 3em 
 
    text-align: left 
 
    margin: 0 
 
    flex: 1 
 

 
    img 
 
    height: 3em

Das ist mein Logo des CSS ist. Es ist in Stylus, aber es macht zu dem, was Sie erwarten würden, dass es zu rendern. Es sieht in Chrome in jeder Größe (auch unterhalb des Breakpoints) gut aus.

Die "doppelte Frage" ist überhaupt kein Duplikat. In meinem Fall sollte das Logo nicht automatisch skaliert werden, nur der Container sollte zu 100% gehen.

Quelle

2017-01-30 aFreshMelon

Haben Sie versucht, und fügte hinzu: '' zu deinem HTML? Ich nehme an, Sie tun, seit Sie es erwähnt haben, ist es möglich, etwas Code zu teilen? –

Mögliches Duplikat von [Safari 100% height and width exception] (http://stackoverflow.com/questions/17675153/safari-100-height-and-width-exception) – Option

Welcher Teil Ihres Szenarios hängt mit der Sprache C zusammen? – Gerhardh

Fügen Sie dieses Metatag Ihrem Kopf hinzu. meta name Ansichtsfenster:

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

Quelle

2017-01-30 16:07:47 MKAD

Responsives Bild, das in Safari nicht auf 100% Breite geht (gut in Chrome)

Antwort

Verwandte Themen