it-swarm.com.de

Responsive CSS-Stile NUR auf mobilen Geräten

Ich versuche, dass meine responsiven CSS-Stile auf Tablets und Smartphones nur funktionieren. Grundsätzlich habe ich einen Stil für Desktop, einen Stil für Mobile: Portrait und einen Stil für Mobile: Landscape. Ich möchte nicht, dass die mobilen Styles die Desktop-Präsentation beeinträchtigen. Ich habe mit unzähligen Medienabfragen herumgespielt, aber entweder werden die mobilen Stile auf dem Desktop angezeigt oder die mobilen Stile werden nur auf mobilen Geräten angezeigt, jedoch mit nur einem Satz von Regeln (nicht reagierend). Gibt es eine Möglichkeit, die beiden vollständig voneinander zu trennen?

Mein Code, den ich gerade habe, sieht so aus:

/* regular desktop styles */

@media only screen 
and (max-device-width: 600px)
 { ... }

/* mobile only styles when the device is 0-600px in maximum width */

@media only screen 
and (max-device-width: 1000px)
{ ... }

/* mobile only styles when the device is up to 1000px in maximum width */
18
jaspn

Das, was Sie dort haben, sollte funktionieren, aber es gibt keine eigentliche "Is Mobile/Tablet" -Abfrage, so dass Sie immer stecken bleiben.

Es gibt media-Abfragen für häufig vorkommende Haltepunkte , aber aufgrund der ständig wechselnden Gerätepalette kann nicht garantiert werden, dass sie vorwärts funktionieren.

Die Idee ist, dass Ihre Website über alle Größen hinweg die gleiche Marke beibehält. Sie sollten also die Stile über die Haltepunkte kaskadieren lassen und nur die Breiten und die Positionierung so anpassen, dass sie dem jeweiligen Ansichtsfenster am besten entsprechen.

Um die obige Antwort zu verbessern, können Sie mit Modernizr mit einem No-Touch-Test Touch-Geräte anvisieren, bei denen es sich höchstwahrscheinlich um Tablets und Smartphones handelt. Mit den neuen Versionen von touch-basierten Bildschirmen ist dies jedoch keine so gute Option wie früher .

9
justinavery

Warum nicht einen Medienabfragebereich verwenden?.

Ich arbeite derzeit an einem responsiven Layout für meinen Arbeitgeber. Die von mir verwendeten Bereiche lauten wie folgt:

Sie haben Ihre Haupt-Desktopstile im Hauptteil der CSS-Datei (1024px und höher) und dann für bestimmte Bildschirmgrößen, die ich verwende:

@media all and (min-width:960px) and (max-width: 1024px) {
  /* put your css styles in here */
}

@media all and (min-width:801px) and (max-width: 959px) {
  /* put your css styles in here */
}

@media all and (min-width:769px) and (max-width: 800px) {
  /* put your css styles in here */
}

@media all and (min-width:569px) and (max-width: 768px) {
  /* put your css styles in here */
}

@media all and (min-width:481px) and (max-width: 568px) {
  /* put your css styles in here */
}

@media all and (min-width:321px) and (max-width: 480px) {
  /* put your css styles in here */
}

@media all and (min-width:0px) and (max-width: 320px) {
  /* put your css styles in here */
}

Dies wird so ziemlich alle verwendeten Geräte abdecken - ich würde mich darauf konzentrieren, das Styling für die Größen am Ende des Bereichs (z. B. 320, 480, 568, 768, 800, 1024) zu erhalten, wie für alle anderen, die sie gerade sind reagiert auf die verfügbare Größe.

Verwenden Sie px auch nicht überall, sondern Em oder%.

18
Ran

Ja, dies kann über die Erkennung von Javascript-Funktionen (oder Browsererkennung, z. B. Modernizr ) erfolgen. Verwenden Sie dann yepnope.js , um die erforderlichen Ressourcen (JS und/oder CSS) zu laden.

4
Raptor

Ich musste ein ähnliches Problem lösen - ich wollte, dass bestimmte Stile nur für mobile Geräte im Querformat gelten. Im Wesentlichen sahen die Schriftarten und der Zeilenabstand in jedem anderen Kontext gut aus, sodass ich nur eine Ausnahme für die mobile Landschaft brauchte. Diese Medienanfrage funktionierte perfekt:

@media all and (max-width: 600px) and (orientation:landscape) 
{
    /* styles here */
}
1
Alan Bellows