Korrekte Medienabfrage für IPad Pro

Ich habe diese zwei, aber sie funktionieren nicht. Ich bin Simulation in ChromeKorrekte Medienabfrage für IPad Pro

/* Landscape*/ 

    @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {} 

    /* Portrait*/ 
    @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}

Wenn ich entfernen ‚und (Orientierung: Landschaft)‘ dann die CSS in dort in der ersten Medien Abfrage funktioniert. Wie ist die richtige Ausrichtung für Quer- und Hochformat?

Der HTML-Meta wird als

<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

Quelle

2017-02-01 Rory

Ihre Frage ist nicht klar. Bitte seien Sie genau mit dem, was Sie erreichen möchten. – Rahul

Es scheint mir klar zu sein: Beide Portrait und Landscape CSS werden nicht auf IPad Pro aufgerufen. Und wenn ich die Orientierung entferne sie arbeiten – Rory

Ich war mit einem ähnlichen Problem konfrontiert. [Dieser] (https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106#.oy5b4ns8s) hat mir wirklich geholfen. – riasc

/* Landscape*/ 

@media only screen and (min-device-width: 1366px) and (max-device-height: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {} 

/* Portrait*/ 
@media only screen and (min-device-width: 1024px) and (max-device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}

Portrait medias Abfrage für iPad Pro sollte in Ordnung sein, wie es ist.

Landschaft Medienabfrage für iPad Pro (min-device-Breite) sollte 1366px und (max Gerätebreite) 1024px sein sollte.

Hoffe, das hilft.

Quelle

2017-02-27 16:51:30

wenn ich dies auf dem Google Chrome Simulator für "ipad pro" versuche funktioniert das nicht für mich – user3003106

wenn Sie die "nur" entfernen und "min-width" anstelle von "min-device-width" verwenden ist nicht funktionieren in Chrom? –

/* ----------- iPad Pro ----------- */ 
/* Portrait and Landscape */ 
@media only screen 
    and (min-device-width: 1024px) 
    and (max-device-width: 1366px) 
    and (-webkit-min-device-pixel-ratio: 1.5) { 
} 

/* Portrait */ 
@media only screen 
    and (min-device-width: 1024px) 
    and (max-device-width: 1366px) 
    and (orientation: portrait) 
    and (-webkit-min-device-pixel-ratio: 1.5) { 
} 

/* Landscape */ 
@media only screen 
    and (min-device-width: 1024px) 
    and (max-device-width: 1366px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 1.5) { 

}

Ich habe kein iPad Pro, aber das funktioniert für mich im Chrome-Simulator.

Quelle

2017-03-31 16:27:05 nykon333

Das ist für mich gearbeitet

/* Portrait */ 
@media only screen 
    and (min-device-width: 834px) 
    and (max-device-width: 834px) 
    and (orientation: portrait) 
    and (-webkit-min-device-pixel-ratio: 2) { 

} 

/* Landscape */ 
@media only screen 
    and (min-width: 1112px) 
    and (max-width: 1112px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 2) 
{ 

}

Quelle

2018-03-03 18:56:12 STrunkett

Korrekte Medienabfrage für IPad Pro

Antwort

Verwandte Themen