Unterschiedliches Bild auf mobiler und Desktop version

[Florian S]

Hallo

Gibt es eine Möglichkeit auf der mobilen Seite ein anderes Bild als auf der Desktop version anzeigen zu lassen?

Danke

Gruß Florian

[Derk]

Hallo,

Gibt es eine Möglichkeit auf der mobilen Seite ein anderes Bild als auf der Desktop version anzeigen zu lassen?

ja, wenn du es als ein Hintergrundbild einbindest kannst du dieses über die Media Queries tauschen.

[MrMurphy1]

Hallo

Gibt es eine Möglichkeit auf der mobilen Seite ein anderes Bild als auf der Desktop version anzeigen zu lassen?

Jein.

Du kannst wie schon geschrieben unterschiedliche Hintergrundbilder abhängig von der Fensterbreite anzeigen lassen. Gleiches gilt für Bilder im HTML-Quelltext mittels der CSS-Eigenschaft "display: none;"

Nachteil beider Lösungen: Es werden immer alle Bilder geladen.

Andere praktikable Lösungen, die in allen gängigen Browsern funktionieren, gibt es zur Zeit meines Wissens nicht.

Gruss

MrMurphy

[Auge]

Hallo

Gibt es eine Möglichkeit auf der mobilen Seite ein anderes Bild als auf der Desktop version anzeigen zu lassen?

Du kannst wie schon geschrieben unterschiedliche Hintergrundbilder abhängig von der Fensterbreite anzeigen lassen. Gleiches gilt für Bilder im HTML-Quelltext mittels der CSS-Eigenschaft "display: none;"

Nachteil beider Lösungen: Es werden immer alle Bilder geladen.

Nein. bei der CSS-Hintergrundbild-Lösung wird nur das Bild geladen, das in der verwendeten Regel referenziert wurde.

Tschö, Auge

[MrMurphy1]

Hallo

Nein. bei der CSS-Hintergrundbild-Lösung wird nur das Bild geladen, das in der verwendeten Regel referenziert wurde.

Leider falsch. Es wird nur ein Hintergrundbild angezeigt, aber beide geladen.

Gruss

MrMurphy

[Auge]

Hallo

Nein. bei der CSS-Hintergrundbild-Lösung wird nur das Bild geladen, das in der verwendeten Regel referenziert wurde.

Leider falsch. Es wird nur ein Hintergrundbild angezeigt, aber beide geladen.

Nicht in meinem Netz! Laut Live HTTP Headers wird nur das zur Regel passende Bild geladen. Ändere ich die Viewportbreite, so dass eine andere Regel zutrifft, wird das dann passende Bild nachgeladen.

Tschö, Auge

[Der Martin]

Hi,

Nein. bei der CSS-Hintergrundbild-Lösung wird nur das Bild geladen, das in der verwendeten Regel referenziert wurde.

Leider falsch. Es wird nur ein Hintergrundbild angezeigt, aber beide geladen.

Nicht in meinem Netz! Laut Live HTTP Headers wird nur das zur Regel passende Bild geladen. Ändere ich die Viewportbreite, so dass eine andere Regel zutrifft, wird das dann passende Bild nachgeladen.

habt ihr schon mal daran gedacht, dass das implementationsspezifisch, also von Browser zu Browser unterschiedlich sein könnte?

So long,
 Martin

[Gunnar Bittersmann]

@@MrMurphy1

Andere praktikable Lösungen, die in allen gängigen Browsern funktionieren, gibt es zur Zeit meines Wissens nicht.

srcset-Attribut, picture-Element und picturefill-Polyfill sind immer noch außerhalb deines Wissens?

LLAP 🖖

[MrMurphy1]

Hallo

srcset-Attribut, picture-Element und picturefill-Polyfill sind immer noch außerhalb deines Wissens?

Ganz im Gegenteil. Das Problem ist halt das die von dir genannten Möglichkeiten häufig falsch oder ungenau beschrieben und dann von Dritten ungeprüft übernommen werden.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

srcset-Attribut, picture-Element und picturefill-Polyfill sind immer noch außerhalb deines Wissens?

Ganz im Gegenteil. Das Problem ist halt das die von dir genannten Möglichkeiten häufig falsch oder ungenau beschrieben und dann von Dritten ungeprüft übernommen werden.

Und deshalb verneinst du deren Existenz??

Andere praktikable Lösungen, die in allen gängigen Browsern funktionieren, gibt es zur Zeit meines Wissens nicht.

Doch, die gibt es.

Das Problem ist halt, dass die von dir gegebenen Antworten häufig falsch oder ungenau geschrieben sind und dann von Dritten ungeprüft übernommen werden.

LLAP 🖖

[Tabellenkalk]

Hallo,

srcset-Attribut, picture-Element und picturefill-Polyfill sind immer noch außerhalb deines Wissens?

Ganz im Gegenteil. Das Problem ist halt das die von dir genannten Möglichkeiten häufig falsch oder ungenau beschrieben und dann von Dritten ungeprüft übernommen werden.

Und deshalb verneinst du deren Existenz??

Wenn es doch bloß irgendwo im Netz eine Möglichkeit gäbe, wo man solche Sachen gemeinsam dokumentieren kann und eventuelle Fehler unkompliziert ausbessern könnte...

Gruß
Kalk

[Matthias Scharwies]

Servus!

srcset-Attribut, picture-Element und picturefill-Polyfill

Wenn es doch bloß irgendwo im Netz eine Möglichkeit gäbe, wo man solche Sachen gemeinsam dokumentieren kann und eventuelle Fehler unkompliziert ausbessern könnte...

Ich habe den redlink schon angelegt:

CSS/Anwendung und Praxis/hochauflösende Bilder responsiv darstellen,

aber alles schaff ich nicht alleine! :-(

Auch zum Thema Single-Page-Webseite gibt es Bedarf für einen Artikel!

Herzliche Grüße

Matthias Scharwies

[Linuchs]

Hallo Florian,

Gibt es eine Möglichkeit auf der mobilen Seite ein anderes Bild als auf der Desktop version anzeigen zu lassen?

Ja, mit PHP. Abhängig von Bedingungen kannst du verschieden Bild-URLs in den HTML-Code schreiben.

Ich weiss allerdings nicht, wie PHP zwischen mobil und Desktop unterscheiden soll. Ich hatte mal diesen Versuch gemacht:

function check_mobile() {
$agents = array(
   'Avantgo'
  ,'Windows CE'
  ,'Pocket'
  ,'Mobile'
  ,'Portable'
  ,'Smartphone'
  ,'SDA'
  ,'PDA'
  ,'Handheld'
  ,'Symbian'
  ,'WAP'
  ,'Palm'
  ,'cHTML'
  ,'BlackBerry'
  ,'Opera Mini'
  ,'Nokia'
  );
  // Prüfen der Browserkennung
  //[HTTP_USER_AGENT|Opera/9.80 (X11; Linux x86_64) Presto/2.12.388 Version/12.16]
  if( isset($_SERVER["HTTP_USER_AGENT"]) )
  for ($i=0; $i<count($agents); $i++) {
    if( strpos($_SERVER["HTTP_USER_AGENT"], $agents[$i]) !== false) {
//    echo $agents[$i]." erkannt<br>";
      return true;
    }
  }
  return false;
}

Aber ein zweifels-ohne mobiles Tablet wird damit nicht erkannt.

Linuchs

[Gunnar Bittersmann]

@@Linuchs

function check_mobile() {
$agents = array(

Nein, User-Agent-Sniffing ist kein sinnvoller Weg.

LLAP 🖖

[Derk]

Nein, User-Agent-Sniffing ist kein sinnvoller Weg.

machen alle große Internetportale. Die haben mehr Ahnung in der Entwicklung als du, also ist es auf keinen Fall keine schlechte Idee. Nur weil es dir mal wieder nicht in den Kopf passt.

[Tabellenkalk]

Hallo,

also ist es auf keinen Fall keine schlechte Idee.

da möchte man dir nicht widersprechen.

Gruß
Kalk

[Gunnar Bittersmann]

@@Derk

Nein, User-Agent-Sniffing ist kein sinnvoller Weg.

machen alle große Internetportale.

Eine der unsinnigsten Begründungen für irgendwas.

also ist es auf keinen Fall keine schlechte Idee.

Dass User-Agent-Sniffing eine sehr schlechte Idee ist, zeigt sich nicht zuletzt auch daran, dass man oft möchte, dass auf demselben Gerät im Hochkant- (portrait mode) und Querformat (landscape mode) verschiedene Bilder angezeigt werden sollen. Was nutzt es da „wissen“ (beachte die Gänsefüßchen), um welches Gerät es sich handelt?

Die haben mehr Ahnung in der Entwicklung als du, […]
Nur weil es dir mal wieder nicht in den Kopf passt.

Hast du außer billiger Polemik noch was zu bieten?

LLAP 🖖

[Linuchs]

Hallo Florian,

jetzt interessiert mich doch mal, warum du zwischen mobil und immobil unterscheiden möchtest.

Soll es ein Navi-Programm werden, wo du die nächste Abfahrt anzeigen möchtest?

Oder geht es lediglich um die vermuteten sehr unterschiedlich großen Displays?

Mein Erkennungsversuch bezog sich darauf, ob ich GPS abfragen soll. Vom genauen Standort hängt es ab, welche Events des Veranstaltungskalenders in der Nähe sind.

Wenn jemand zuhause an seinem Immobile hockt, wird er (vermutlich) seine Stadt kennen und - zumindest damals - wollte ein Immobile keine GPS-Anfrage beantworten.

Linuchs

[Gunnar Bittersmann]

@@Linuchs

Mein Erkennungsversuch bezog sich darauf, ob ich GPS abfragen soll.

Das geht ohne user agent sniffing. Frag GeoLocation ab (neben GPS auch Funkzellen- und WLAN-Abfrage), d.h. frag ab, ob das Gerät das unterstützt – feature detection. Um welches Gerät es sich (evtl.!) handelt, ist irrelevant.

Für Geräte, die GeoLocation unterstützen, biete die Funktion zusätzlich auf der Seite an – progressive enhancement.

LLAP 🖖

[Gunnar Bittersmann]

@@Florian S

Gibt es eine Möglichkeit auf der mobilen Seite ein anderes Bild als auf der Desktop version anzeigen zu lassen?

Was genau meinst du mit „mobiler Seite“ und „Desktopversion“? Vermutlich meinst du nicht getrennte Seiten (mit verschiedenen URIs), sondern dass dieselbe Seite auf verschiedenen Geräten unterschiedlich dargestellt wird? Wenn auch die Benennungen „mobile Seite“ und „Desktopversion“ recht unbrauchbar dafür sind.

Ja, es gibt die Möglichkeit, je nach Gegebenheiten beim Client (bspw. je nach Viewportbreite, sollte aber nicht darauf beschränkt sein) unterschiedliche Bilder zu laden – responsive images.

Hier ein schon etwas älterer Artikel von Kulturbanause auf deutsch, hier ein ziemlich neuer Artikel von Jake Archibald.

Ich hatte letztens auch noch einen anderen umfassenden Artikel gelesen. Wenn ich ihn wiederfinde, reiche ich ihn nach.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Ich hatte letztens auch noch einen anderen umfassenden Artikel gelesen. Wenn ich ihn wiederfinde, reiche ich ihn nach.

Nicht der, den ich gesucht hatte, aber sicher lesenswert: 2 Artikel von Eric Portis

• Responsive Images in Practice (A List Apart)

• Responsive Images Done Right: A Guide To <picture> And srcset (Smashing Magazine)

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Ich hatte letztens auch noch einen anderen umfassenden Artikel gelesen. Wenn ich ihn wiederfinde, reiche ich ihn nach.

Nicht der, den ich gesucht hatte

Das isser, glaub ich: Using Responsive Images (Now) (A List Apart)

LLAP 🖖

[Florian S]

@@Florian S

Gibt es eine Möglichkeit auf der mobilen Seite ein anderes Bild als auf der Desktop version anzeigen zu lassen?

Was genau meinst du mit „mobiler Seite“ und „Desktopversion“? Vermutlich meinst du nicht getrennte Seiten (mit verschiedenen URIs), sondern dass dieselbe Seite auf verschiedenen Geräten unterschiedlich dargestellt wird? Wenn auch die Benennungen „mobile Seite“ und „Desktopversion“ recht unbrauchbar dafür sind.

Ja, es gibt die Möglichkeit, je nach Gegebenheiten beim Client (bspw. je nach Viewportbreite, sollte aber nicht darauf beschränkt sein) unterschiedliche Bilder zu laden – responsive images.

Hier ein schon etwas älterer Artikel von Kulturbanause auf deutsch, hier ein ziemlich neuer Artikel von Jake Archibald.

Ich hatte letztens auch noch einen anderen umfassenden Artikel gelesen. Wenn ich ihn wiederfinde, reiche ich ihn nach.

LLAP 🖖

Hallo, meine Seite läuft mit bootstrap (http://getbootstrap.com). Dort wird automatisch erkannt, ob von einem pc oder einem smartphone aufgerufen wird und demnach die oder die Seite angezeigt.

Gruß Florian

[Gunnar Bittersmann]

@@Florian S

meine Seite läuft mit bootstrap (http://getbootstrap.com). Dort wird automatisch erkannt, ob von einem pc oder einem smartphone aufgerufen wird

Und was mit Geräten dazwischen? Wo man auch immer die Grenze ziehen will, sie ist falsch. Bei Geräten gibt es nämlich keine.

und demnach die oder die Seite angezeigt.

Also verschiedene Seiten für kleine und große Geräte? Wo ist das Problem, auf verschiedenen Seiten verschiedenen Bilder einzubinden?

Und was ist für Geräte zwischen klein und groß? Aber das fragte ich schon.

Verschiedene Seiten für kleine und große Geräte sind keine gute Idee. “There is no Mobile Web.” —Stephen Hay

LLAP 🖖

PS: Zitiere bitte sinnvoll, nicht alles.