Ich habe viele alte Assets (HTML- und Bilddateien), die ich für Mobilgeräte optimieren muss. Die vorhandenen Elemente wurden für den Desktop erstellt und hatten kein mobiles Gerät im Sinn.
Ich plane folgende Änderungen:
1) Wenn es im Front-End auf einem Desktop-Gerät ausgeführt wird, wird sein Inhalt von der vorhandenen URL geladen (z. static.example.com/document1/index.html ). Wird die Website jedoch von einem iphone6 geladen, wechselt sie zu static.example.com/document1_iphone6/index.html
2) document1_iphone6 ist im Grunde ein Duplikat von document1. Die Größe aller Bildelemente wird auf 750 x 1334 angepasst
Gibt es ein Problem mit diesem Plan?
srcset? Das würde auch (neuere) Androids unterstützen und Ihre Optimierungen nicht nur auf das iPhone beschränken. Wie würden Sie das Gerät erkennen?Antworten:
Ich denke, Sie sind auf dem richtigen Weg, um Bilder für mobile Geräte zu optimieren, aber ich denke, dass die Art und Weise, wie Sie damit umgehen, nicht sehr gut skaliert werden kann. Wenn Sie nur iPhones mit verkleinerten Bildern anvisieren, werden Sie 5 verschiedene Größen unterstützen, iPhone 6+, iPhone 6, iPhone 5 / 5S, iPhone 4 / 4S und das Original, was nicht so schlecht ist.
Aber was ist, wenn Sie Android-Telefone auf demselben Level unterstützen möchten und für jedes Gerät ein Image erstellen möchten? Sie werden am Ende Dutzende verschiedener Bildgrößen haben.
Android-Bildschirmauflösungen
Hier ist ein weiterer Link mit einer größeren Liste von Gerätegrößen.
mydevice.io gängige Smartphonegrößen
Sie haben nicht nur Dutzende verschiedener Geräte, sondern Ihr Benennungsschema funktioniert auch nicht so gut, da einige Auflösungen für mehrere Anzeigen verwendet werden und Sie doppelte Bilder erhalten.
Eine bessere Möglichkeit zur Optimierung für Mobilgeräte besteht darin, Bildschirmauflösungen anstelle von Geräten festzulegen. Beispielsweise könnten Sie eine Reihe von Auflösungen wie z
Mit dieser Methode können Sie alle Mobilgeräte mit nur 6 verschiedenen Größen unterstützen. Wenn ein neues Gerät gestartet wird, müssen Sie nicht die Größe aller Bilder auf Ihrer Site für das neue Gerät ändern.
Dies alles setzt voraus, dass Sie nur über die Größenänderung Ihrer Image-Assets sprechen. Wenn Sie Ihr Layout für jedes Gerät überarbeiten, ist es viel besser, eine reaktionsfähige Site zu erstellen, die für Mobilgeräte skaliert.
quelle