@media only screen and (device-width: 768px) {
/* For general iPad layouts */
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/* For portrait layouts only */
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/* For landscape layouts only */
}iPad-spezifisches CSS
Chris Coyier am
Kein Problem. Aber Ihnen fehlt ein schließender Schrägstrich in Ihrer zweiten Kommentarzeile.
Danke!
Ich würde gerne ein Screencast über Design für ein iPad sehen
Ich bin sicher, es ist wie bei dem iPhone-Screencast, den Sie gemacht haben, aber trotzdem...
Dieses CSS wird auch von *allen kleinen Bildschirmen* verwendet – das könnte unerwünscht sein, da die CSS-Probleme (wie position: fixed) oft nicht für Netbooks gelten, wo der Browser und das Betriebssystem anders sein können als bei einem iPad...
Ich frage mich, warum device-width = 768? Warum ist es nicht 1024?
1024px ist die längste Seite, 768px ist die kürzeste Seite, daher möchten Sie sicherstellen, dass das CSS auch auf der kürzesten Seite des iPad funktioniert. Es ist iPad-spezifisch.
Die minimale Breite von 481px bis zur maximalen Breite von 1024px sorgt dafür, dass das CSS in der eingestellten Ausrichtung auf jedem Gerät zwischen den Pixelbreiten von iPhone und iPad in diesem Fall funktioniert.
Hoffe, das hilft.
Das hängt von der Ausrichtung des Geräts (iPad) ab, ob es sich um eine vertikale oder horizontale Ausrichtung handelt. Daher hätte die vertikale Ausrichtung eine Breite von 768 und eine Höhe von 1024, während bei der horizontalen Ausrichtung die Breite 1024 und die Höhe 768 wäre.
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/* Nur für Hochformat-Layouts */
}
wird Probleme mit neueren Android-Geräten verursachen. Ich habe festgestellt, dass, damit Hochformat-Stile für das iPad nicht von meinem Galaxy S2-Gerät übernommen werden, Folgendes verwendet werden muss:
@media only screen and (device-width: 768px) {
}
Stattdessen... Ich weiß, es ist nicht wirklich eine Lösung, aber es muss beachtet werden.
Dieser Code tut bei mir nichts... was mache ich falsch?
Wow :D
@designer: Versuchen Sie Folgendes: #page @media only screen and …. { .. }
Gibt es eine Möglichkeit, das CSS zu testen, wenn man kein iPad hat? So etwas wie IE Tester für Mobilgeräte? Habe http://ipadpeek.com/ ausprobiert, aber es wendet die Stile nicht an.
Probieren Sie BrowserStack http://www.browserstack.com/user/dashboard
@Tim Wenn Sie einen Mac haben, holen Sie sich: Xcode, das den IOS Simulator (iPhone und iPad) enthält. Hier ist ein kurzes Video, das Ihnen dabei helfen wird. http://www.youtube.com/watch?v=oobXPWHx3ZI
Gehen Sie dann zu http://moduscreate.com/enable-remote-web-inspector-in-ios-6/, um den Entwicklermodus in Safari zu aktivieren.
Kombinieren Sie die beiden und es funktioniert wie der Element-Inspektor in den meisten Browsern, nur eben für iPhone und iPad :)
Habe das nicht unter Windows Safari getestet – weiß jemand mehr?
Danke für den Tipp mit dem Code-Schnipsel, ich hatte nicht gemerkt, dass es so einfach ist. :-)
Für diejenigen, die versuchen, den obigen Code auf ipadpeek.com zum Laufen zu bringen, müssen Sie zuerst ein paar Dinge tun.
1. Fügen Sie das folgende Meta-Tag am Anfang der HTML-Seite direkt unter dem öffnenden Tag ein.
2. Wenn Sie bereit sind, Ihre Website anzuzeigen, müssen Sie die Monitorauflösung auf 1024×768 ändern und die Seite von ipadpeek.com neu laden.
Entschuldigung für den Doppelpost, aber der Tag-Code wurde im obigen Beitrag nicht angezeigt.
Hier ist der Meta-Tag, auf den ich mich bezogen habe.
<meta name="viewport" content="width=device-width" />
@media only screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-min-device-pixel-ratio: 1)
{
/* Ihre iPad-spezifischen Regeln hier */
}
@media only screen and (device-width: 768px)
{
#background img {
display: none;
}
/* Ihre iPad-spezifischen Regeln hier */
}
Wow, schnelle und einfache Lösung! Danke für das Teilen dieser Technik, das hat mir viel Kopfzerbrechen erspart.
Danke!
Was ist mit dem iPad 3, das eine höhere Auflösung als 768px hat?
Habe es auf dem iPad 3 getestet, funktioniert gut
(dies hier hat funktioniert
@media only screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-min-device-pixel-ratio: 1)
{
#background img {
display: none;
}
}
)
@SirKay
du bist so cool! Dieser Code, den Sie gegeben haben, funktioniert zu 100 %. Danke.
Ich habe eine ähnliche Frage. Die Antwort könnte die Verwendung der in diesem Beitrag beschriebenen Media Query (oder etwas anderes) beinhalten. Wenn der Seiteninhalt weniger als 1024 Pixel hoch ist, gibt es eine Technik, um den Footer anzupassen, damit der Footer-Hintergrund (Farbe oder Bildwiederholung) bis zum unteren Rand der Seite reicht, wenn er im Hochformat auf dem iPad angezeigt wird? Ich gehe davon aus, dass dies ein Standardproblem ist, aber ich habe noch keine Lösungen dafür gesehen. Ich denke, der Footer ist der offensichtlichste Div, der angepasst werden kann, aber es könnte eine andere Technik oder ein Div geben, das das Design in diesem Fall "rettet". Irgendwelche Vorschläge wären sehr willkommen.
Sollte ich verwenden
plus
@media only screen and (device-width: 768px)
{
#background img {
display: none;
}
/* Ihre iPad-spezifischen Regeln hier */
}
oder könnte ich ohne diesen Code auskommen?
aus irgendeinem Grund wurde dieser Code meta name="viewport" content="width=device-width" in den leeren Bereichen oben nicht angezeigt
Wow! Habe tagelang gesucht, um dieses Problem zu beheben, jetzt funktioniert alles auf dem iPad, ohne die Website in anderen Browsern zu beeinträchtigen.
Vielen Dank für diesen Beitrag!
Hat jemand diese Code-Tipps auf den neuen größeren Samsung-Handys getestet?
Danke Jungs, für diejenigen, die es in JavaScript verwenden möchten
if (window.matchMedia(‘only screen and (device-width: 768px)’).matches)
{
// iPad... vielleicht ein wenig DOM-Scripting für kleine Bildschirme ausführen?
}
if (window.matchMedia(‘only screen and (max-width: 480px)’).matches)
{
// Smartphone/iPhone... vielleicht ein wenig DOM-Scripting für kleine Bildschirme ausführen?
}
Wow, das wusste ich nicht. Das ist großartig. Danke fürs Teilen ;)
Perfekt. Hat mir bei einem Projekt kurz vor dem Livegang viel Ärger erspart!
Safari wurde unter Windows eingestellt und die Remote-Inspektion ist nur in Version 6+ verfügbar (die nicht für Windows verfügbar ist).
Gibt es eine Möglichkeit, einen Div zu entwerfen, der scrollt, um die Scrollleiste auf dem iPad anzuzeigen. Derzeit funktioniert dieser CSS-Trick mit einem Zweifinger-Scroll, was für mich in Ordnung ist. Ich möchte wirklich, dass die Scrollleiste auf dem iPad sichtbar ist, damit der Benutzer weiß, dass es Inhalt zum Scrollen gibt?? Jede Hilfe wäre sehr großartig!
Seltsamerweise hat das bei mir überhaupt nicht funktioniert.
Ich habe weiter recherchiert und eine Methode gefunden, die funktioniert, hoffentlich hilft sie jemandem
@media screen and (max-width:480px) {
/* Überschriften für Smartphone-Benutzer rot färben */
h1 {
color: red;
}
}
@media screen and (min-width:481px) and (max-width:1280px) {
/* Überschriften für PC-Benutzer schwarz färben */
h1 {
color:green;
}
}
@media screen and (min-width:1281px) {
/* Überschriften für Smartphone-Benutzer rot färben */
h1 {
color: black;
}
}
Danke für die schnelle und einfache Methode :)
Das Problem, das ich hatte, wurde behoben.
Warum ist device-width = 768? Warum ist es nicht 1024?
Entschuldigung Leute, aber das macht keinen Sinn!
Es gibt viele Geräte, die 480px oder 1024px nutzen, daher betrifft dieses CSS alle, nicht nur iPad-Geräte.
Ich stimme Ihnen voll und ganz zu.
Was halten Sie von der PHP-Geräteerkennung und dem Hinzufügen von isTablet / isMobile / isIpad ... zur Body-Klasse und dem Anwenden von CSS-Stilen wie diesem?
// Ich verwende verschachtelte CSS-Regeln mit Compass
body.isIpad{<br/>
// Ihre iPad-spezifischen Regeln hier <br/>
@media only screen and (orientation : landscape) {<br/>
// Ihre iPad-spezifischen Regeln für Querformat hier<br/>
}
@media only screen and (orientation : portrait) {<br/>
// Ihre iPad-spezifischen Regeln für Hochformat hier<br/>
}
<br/>}
Erasmussen, funktioniert das sofort? UND mit allen iPad-Geräten? Ich bin sicher, Sie können mehr Details zu Ihrem Code hinzufügen. Wie der Unterschied bei der Adressierung eines iPad 2 oder iPad Retina.
Wenn Sie wissen, wie, würde ich mich sehr über einen voll funktionsfähigen Code freuen, damit ich daraus lernen kann, da ich Schwierigkeiten habe, die Responsivität herauszufinden. Danke.
Ramses,
Für die Geräteerkennung verwende ich diese PHP-Klasse: http://mobiledetect.net/ sehr einfach und komplett. Sie können Mobiltelefone, Tablets und Gerätetypen erkennen: Blackberry, Samsung, Asus oder ... iPad.
Ich lasse Sie die Dokumentation lesen. Mein HTML-Code sieht so aus
Dann können Sie im CSS den zuvor gesendeten Code verwenden und die von CSS-Tricks gegebenen hinzufügen: https://css-tricks.de/snippets/css/retina-display-media-query/
Das ist vielleicht nicht der beste Weg... aber es funktioniert für mich gut.
Als die "Retina"-Displays herauskamen, beschloss ich, mich nicht mehr mit Pixelzählung zu beschäftigen und stattdessen das Geräteverhältnis zu verwenden. Ich hatte guten Erfolg mit 3/4 (oder 4/3, je nachdem) für iPads und... bisher... 40/71 für mein iPhone (¡!)
Hallo,
Da wir dies für Media Screen definieren,
Können wir das Seitenlayout auch für die Schriftgröße definieren.
Wie z. B. wenn ich meine Seitenlayout-Ausgabe auf dem iPad betrachte, aber wenn ich die Schriftgröße erhöhe oder verringere – das Layout zeigt den Fluss des Inhalts nicht korrekt an.
Gibt es eine Lösung, die wir für die Schriftgröße definieren können;
wie-
@media screen bei Schriftgröße: 10 – 50 %
wird die Seite aussehen wie..
Hallo zusammen,
Ich bin nicht sehr gut im Programmieren, aber ich versuche, viele CSS-Dateien loszuwerden, die in mein HTML eingebunden sind, wenn sie von einem mobilen User-Agent aufgerufen werden. Meine Website läuft unter WordPress und ich habe das WPTouch-Plugin für meine mobilen Besucher installiert. Dieses Plugin deaktiviert die Wirkung der meisten anderen Plugins, die im Theme installiert sind (das stört mich nicht). Das Problem ist, dass ich sehe, dass die CSS-Dateien all dieser Plugins immer noch geladen werden (ohne Designeffekt), was die Seitenladezeit auf einem mobilen Gerät verlangsamt. Gibt es eine Möglichkeit, zu verhindern, dass sie geladen werden, wenn der User-Agent ein Mobilgerät ist?
PS: Der Support des WPTouch-Teams ist schlecht, es sei denn, Sie bezahlen für die Pro-Version.
Ich denke, mit dem iPad Pro, das auf dem Markt ist, brauchen wir vielleicht etwas Raffinierteres.
Kein Erfolg. Ich habe nichts gefunden. Ich bin mir nicht sicher, ob CSS-Tricks eine Lösung für die Landschaftsausrichtung des iPad Pro gefunden hat....
Hallo,
Ich habe eine funktionierende Website, und sie ist großartig auf meinem iPad 3 und iPhone 6.
Ich habe auch ein iPad 1, aber egal welchen Code ich bearbeite oder verwende, es zeigt immer nur dasselbe wie das iPhone 6 an
Wenn ich es ins Hochformat drehe, dreht sich der Bildschirm nicht einmal.
Mein Hauptziel ist es, die Landschaftsansicht des iPad 1 so zu haben, dass sie dasselbe anzeigt wie das iPad 3, NICHT wie ein iPhone.
Jede Hilfe wäre großartig & willkommen.
Warum wird min-width auf 481 gesetzt, wenn die Breite des iPad im Hochformat 768 und im Querformat 1024 beträgt? Decken dies auch andere Tablets ab oder fehlt mir etwas sehr Offensichtliches?
Ich hatte ein Problem mit dem iPad im Querformat, das dazu führte, dass Bilder vergrößert wurden. Im Hochformat funktioniert es relativ gut. Ich habe eine Abwandlung von @SirKays CSS-Schnipsel verwendet (danke für den Ausgangspunkt) wie folgt:
@media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 1)
{
#”Seitennamen oder Identifikator” {
background:url(“image url”) no-repeat top center; background-size:cover;
}
}
Das Problem ist, dass iOS im Querformat einen Fehler hat, der mit der „fixed“- oder „absolute“-Bildpositionierung kollidiert. Der Fehler ist im Hochformat nicht vorhanden, obwohl er eine Anweisung zur „Wiederholung des Bildes vertikal“ einführt, um zusätzliche Leerzeichen aufgrund der Skalierung zu vermeiden. Ich experimentiere damit, zusätzliche Vergrößerungen bei der Skalierung zuzulassen, um zu sehen, ob dies ihn überwindet.
Das einzige Problem bei der Entfernung der Positionsangabe ist, dass sie beim Scrollen zusätzliche Leerzeichen oberhalb des Bildes erzeugt. Ich recherchiere gerade nach Code, um dies zu überwinden, was derzeit ein Scrollproblem ist. Die Alternative ist die Verwendung des „display:none“-Parameters, der auf kleineren Bildschirmen manchmal vorzuziehen ist, um zu viel Scrollen für den Benutzer zu vermeiden, allerdings auf Kosten der Ästhetik.
Was die Frage der minimalen Breite „768px“ betrifft, so nutzt iOS dies immer als Gerätebreite und niemals als „1024px“, sondern verlässt sich auf eine „Orientation“-Anweisung, um festzustellen, was es mit CSS tun soll.
Ich habe festgestellt, dass die Stile innerhalb dieser Media Queries auch für das iPhone X gelten.
Width vs device-width? Sind sie nicht gleich?