Medienanfragen Arbeit auf Browser aber nicht auf mobilen

stimmen
0

Ich habe eine Medienabfrage für Iphone X, wie folgend:

@media screen and (min-width: 374px) and (max-width: 376px) and (min-height: 811px) and (max-height: 812px) {
  .welcome-banner {
    background-image: url('~assets/images/landing/welcome-banner-iphonex.jpg');
    background-size: cover;
    background-position: center;
    height: calc(110vh - 64px);
    display: flex;
  }
}

Es funktioniert perfekt auf Chrome, aber es funktioniert nicht in dem mobilen selbst. Ich mache das Ansichtsfenster-Tag auf der Meta haben:

<meta name=viewport content=width=device-width,initial-scale=1.0>
Veröffentlicht am 13/01/2020 um 23:53
quelle vom benutzer
In anderen Sprachen...                            


1 antworten

stimmen
0

Ihre Frage scheint richtig, aber stellen Sie sicher, dass es wirklich ist, was dieses Gerät, das Sie testintg Bedürfnisse sind. Sie können die richtige Cross-Browser @media (Breite) und @media (Höhe) Werte erhalten, indem Sie die folgenden auf der Konsole mit Javascript Anmeldung:

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
console.log(w,h);

auch die erneut prüfen initial-scaleMeta und zoomen, könnten sie Ihre Geräte Ansichtsfenster werden vermasselt.

Auch diese Abfrage ist sehr, sehr spezifisch. Wenn Sie nur - und ich nur meine - wollen dieses Gerät Ziel dann das in Ordnung ist, aber es könnte besser für mehr globale Abfragen gi, ich zielen in der Regel 320 bis 767 (kleiner als alte Ipads) und vielleicht 480 dazwischen, wenn nötig.

Beantwortet am 14/01/2020 um 00:00
quelle vom benutzer

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more