Mam wiele starych zasobów (pliki HTML i graficzne), które muszę zoptymalizować pod kątem urządzeń mobilnych. Istniejące zasoby zostały utworzone na komputery i nie miały na myśli urządzeń mobilnych.
Planuję wprowadzić następujące zmiany:
1) Jeśli działa na urządzeniu stacjonarnym, jego zawartość zostanie załadowana z istniejącego adresu URL (np static.example.com/document1/index.html
.). Ale jeśli witryna zostanie załadowana z iPhone'a6, przełączy się nastatic.example.com/document1_iphone6/index.html
2) document1_iphone6
jest w zasadzie duplikatem document1
. Wszystkie zasoby obrazu zostaną przeskalowane, aby zmieściły się w rozmiarze 750 x 1334
Czy jest jakiś problem / wada tego planu?
srcset
? To również wspierałoby (nowsze) Androidy i nie ograniczałoby tylko optymalizacji do iPhone'a. Jak wykrywasz urządzenie?Odpowiedzi:
Myślę, że jesteś na dobrej drodze do optymalizacji obrazów na urządzenia mobilne, ale myślę, że sposób, w jaki to robisz, nie będzie zbyt dobrze skalowany. Jeśli kierujesz reklamy na iPhone'y ze zdjęciami o zmienionym rozmiarze, będziesz obsługiwać 5 różnych rozmiarów, iPhone 6+, iPhone 6, iPhone 5 / 5S, iPhone 4 / 4S oraz oryginalne, co nie jest takie złe.
Ale co, jeśli chcesz obsługiwać telefony z Androidem na tym samym poziomie, mając obraz dla każdego wykonanego urządzenia? Skończysz z dziesiątkami różnych rozmiarów zdjęć.
Rozdzielczość ekranu Androida
Oto kolejny link z większą listą rozmiarów urządzeń.
mydevice.io popularne rozmiary smartfonów
Nie tylko będziesz mieć dziesiątki różnych urządzeń, ale twój schemat nazewnictwa nie będzie działał tak dobrze, ponieważ niektóre rozdzielczości są używane dla wielu wyświetlaczy, pozostawiając cię z duplikatami obrazów.
Lepszym sposobem optymalizacji na urządzenia mobilne jest wybranie rozdzielczości ekranu zamiast urządzeń. Na przykład możesz kierować na zestaw rozdzielczości takich jak
Dzięki tej metodzie możesz obsługiwać wszystkie urządzenia mobilne o zaledwie 6 różnych rozmiarach, a ponadto po uruchomieniu nowego urządzenia nie będzie trzeba zmieniać rozmiaru każdego obrazu w witrynie dla nowego urządzenia.
Wszystko to przy założeniu, że mówisz o zmianie rozmiaru zasobów obrazu. Jeśli zamierzasz przerabiać swój układ dla każdego urządzenia, znacznie lepiej byłoby stworzyć responsywną witrynę skalowaną dla urządzeń mobilnych.
źródło