Tworzę aplikację internetową, która generuje i obsługuje strony internetowe na urządzenia mobilne. Na przykład użytkownik konfiguruje dane, które mają pokazywać i używa szablonu prędkości do generowania ostatecznych plików HTML/CSS/JS. Po skonfigurowaniu szablonu i informacji do uwzględnienia klienci łączą się z serwerem, aby wyświetlić wygenerowane strony.Symulowanie ekranu urządzenia na stronie internetowej
Jednak teraz tworzę ekran podglądu. Powiedzmy, że chcę zobaczyć, jak będzie wyglądać na przykład, powiedzmy, Nexus 5.
Moim celem jest stworzenie czegoś takiego jak Google na Chrome - emulacja urządzenia mobilnego. Problem polega na tym, że nie jestem w stanie zrozumieć, w jaki sposób są w stanie wykonać tego rodzaju emulację.
To prawda, że zawartość musi być pomniejszona, aby pokazać wszystko. Jest to dość łatwe do zrozumienia, jeśli ekran nie jest wystarczająco duży, musimy go dopasować.
Tak, wiem, rozmiar przekątnej ekranu urządzenia, rozdzielczość i PPI (punkty por calowe). Muszę wiedzieć, jak uzyskać odpowiednie pomiary dla mojej strony internetowej, aby emulować urządzenie. Kiedy idę do narzędzia emulacji Chrome widzę, że Nexus 5 jest pokazany jako:
- Rozdzielczość 360 x 640
- stosunek Pixel aspekt 3
wiem, w jaki sposób obliczyć stosunek pikseli obrazu : to PPI urządzenia podzielone przez 160 (bazowy PPI). Tak więc, 445/160 = ~ 3 (445 to gęstość pikseli Nexusa 5). W ten sposób osiągnęli 360 x 640: dzielą rozdzielczość przez współczynnik proporcji pikseli (3).
Na mojej stronie mam element iframe i ładuję wygenerowaną stronę do niego. Wtedy wiem, że muszę zastosować poziom powiększenia. I tu właśnie jest problem. Naprawdę nie wiem, jaką wartość powinno mieć powiększanie.
Jednym z podejść było
1/((ekranu telewizora przekątna)/proporcji pikseli) = 1/(4,95/3) = 0,6060 (60)
Stosując tę zoom sprawia, że wygląda dobrze. Jeśli podążę tą samą drogą z Amazon Kindle HDX to też działa.
Jednak jeśli pójdę z LG L70 uzyskać następujące:
1/(4,5/1,25) = 0,27777777 ...
Problemem jest to, że zastosowanie to pomniejszenie rzeczy będzie o wiele mniejszy (z powodu tak dużego oddalenia) w porównaniu do Nexusa 5, a w trybie emulacji Chrome wyglądają tak samo.
Proszę dać mi znać, jeśli są jakieś informacje, które mogą pomóc w rozwiązaniu tej zagadki.