Symulowanie ekranu urządzenia na stronie internetowej

Question

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.

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.

Answer 1

Współczynnik proporcji pikseli określa stosunek szerokości do wysokości, określając, w jaki sposób "kwadratowe" piksele znajdują się na urządzeniu.

Google pozwala jednak dostosować współczynnik pikseli urządzenia.Mierzy to, ile pikseli urządzeń jest mapowanych na pojedynczy piksel logiczny (1 piksel w css).

Uważam, że współczynnik pikseli urządzenia ma znaczenie, ponieważ różne rozmiary ekranu mają ten sam rozmiar.

Obliczenia gęstości, które wykorzystują współczynnik pikseli urządzenia do obliczenia efektywnego zoomu, można obliczyć w jednym wymiarze, nie ma potrzeby korzystania z pomiaru po przekątnej.

obliczania efektywnej css_width pulpit z tabletki:

desktop_pixels = tablet_pixels * (desktop_ppi/tablet_ppi) (1)

tablet_pixels = tablet_css_width * tablet_pixel_density

desktop_pixels = desktop_css_width * desktop_pixel_density

do (1)

desktop_css_width * desktop_pixel_density = tablet_css_width * tablet_pixel_density * (desktop_ppi/tablet_ppi)

zmienić

desktop_css_width = tablet_css_width * (tablet_pixel_density/desktop_pixel_density) * (desktop_ppi/tablet_ppi)

Logicznym współczynnik powiększenia jest desktop_css_width/tablet_css_width

zoom_factor = (tablet_pixel_density/desktop_pixel_density) * (desktop_ppi/tablet_ppi)