Emulacja rozdzielczości fizycznej ekranów smartfonów na rozdzielczość CSS(edycja tematu).

pytanie zadane 23 kwietnia 2018 w HTML i CSS przez w2 Obywatel (1,110 p.)
edycja 24 kwietnia 2018 przez w2

Cześć,
Pytania:
1.Jak projektować stronę www, w zgodzie z siatką Bootstrapa? i poprawnym wyświetlaniem na ekranach smartfonów?
2.Jak powiązać wyświetlanie strony np. w rozdz. na szerokość ekranu 1440px na smartfona i na laptopa, jeśli mają wyświetlać się inaczej (czy to możliwe?)?

Czy:
a) dodajemy do istniejących funkcji sterujących Bootstrapa- dodatkowe funkcje z nowymi rozdzielczościami?
b) czy zastępujemy funkcje Bootstrapa?

Siatka Bootstrapa:

xs (for phones - screens less than 768px wide)
sm (for tablets - screens equal to or greater than 768px wide)
md (for small laptops - screens equal to or greater than 992px wide)
lg (for laptops and desktops - screens equal to or greater than 1200px wide)

10 najpopularnieszych smartfonów w 2018 roku i ich rozdzielczości:

(1440 x 2560 px)
1.samsung S7,
2.LG G7,
3.SAMSUNG GALAXY S7 EDGE;
7.SAMSUNG GALAXY S6
----------------------------------------------------------
(1080 x 1920 px)
4.XIAOMI REDMI NOTE 4X ;
5.XIAOMI REDMI NOTE 4;
9. HUAWEI P9 LITE;
10.XIAOMI MI A1
----------------------------------------------------------
(750 x 1334 px)
6.APPLE IPHONE 7
----------------------------------------------------------
(720 x 1280 px)
8.HUAWEI P8 LITE

2 odpowiedzi

odpowiedź 23 kwietnia 2018 przez ShiroUmizake Nałogowiec (46,300 p.)

Jak projektować stronę www, w zgodzie z siatką Bootstrapa? i poprawnym wyświetlaniem na ekranach smartfonów?

Mam dziwne wrażenie, że nieprzeczytałeś do końca dokumentacji Bootstrapa. Nie ma czegoś jak zgodnie z bootstrapem. Wszystko zależy jak wiele elementów interfejsu ma być boostrapowe. Jeśli zakładasz, że ma służyć jako sitaka głowna, to wykorzystujesz bootstrap na elementach wrapujących dany istotny element interfejsu, pamiętając o zasadzie 12 kolumn.

.Jak powiązać wyświetlanie strony np. w rozdz. na szerokość ekranu 1440px na smartfona i na laptopa, jeśli mają wyświetlać się inaczej (czy to możliwe?)?

Do tego ci służą pamaremtry xs,lg,col itd. Nie.. nie da się by siatka medium, świeciła tak samo jak na smartfonach. Nie bez powodu to się nazywa resposywność. Piszesz kod CSS, który dostosowuje się do elementów HTML (nie na odwrót)

dodajemy do istniejących funkcji sterujących Bootstrapa- dodatkowe funkcje z nowymi rozdzielczościami?

Nawet, możesz go zmienić! (jeśli nie pobierasz po CDN) Nadpisać! Framework wymusza pewne zasady pisania kodu, ale dalej to jest framework napisany w CSS, więc jak najbardziej możesz elastycznić go. Co do rodzielczości nie powinno się ich robić, aczkolwiek są urządzenia jak Mac do których trzeba czasami podchodzić od innej strony.

komentarz 23 kwietnia 2018 przez w2 Obywatel (1,110 p.)
edycja 23 kwietnia 2018 przez w2

Dzięki bardzo za głos, ufam że dzięki Tobie rozwiąże parę (krytycznych dla mnie) problemów.
1. Przy szerokości ekranu 1440 px mam podział na 3 główne kolumny (4+4+4=12). To jest zaprojektowane do wyświetlania na mniejszych laptopach.
Ale ta rozdzielczość jest za mała na wyświetlanie jej na smartfonach, np Samsung Galaxy S7 ma tą samą rozdzielczość (szerokość 1440px; ekran: 1440x2560px ). Patrz rys.:

Nie wiem jak ustawić, żeby na smartfonie wyglądało inaczej? Chciałbym żeby była wyświetlana 1 kolumna (12) Ustawiłem włączanie 1 kolumny od rozdzielczości <768px (1px-767px).
To sam problem dotyczy szerokości 1080px (2 kolumny)- zaprojektowanej pod iPady- a dla XIAOMI REDMI (1080px szerokość ekranu) są informacje za male
Nie wiem jak z tego wybrnąć..albo czegoś nie rozumiem..

komentarz 23 kwietnia 2018 przez ShiroUmizake Nałogowiec (46,300 p.)

IPADY ograliśmy wysokością ;). Nie do końca rozumiem twojego problemu.

komentarz 23 kwietnia 2018 przez w2 Obywatel (1,110 p.)

Tak wygląda poprawne wyświetlanie na ekranie laptopa, w górnym prawym rogu- rozdzielczość ekranu. Włączone wyświetlanie 3 kolumn (bootstrap 4+4+4).

Poniżej są wyświetlenia 2kolumny (iPad); smartfony (1 kolumna ) o rozdzielczosci do 767px.

Pytanie które już zadałem wcześniej brzmi: jak projektować na nowe smartfony, żeby się nie gryzło z rozdzielczościami na male laptopy. Czy na dużych rozdzielczościach smartfonow, obraz jest inaczej dopasowany? Rozdzielczość jest zmniejszana itp?

komentarz 23 kwietnia 2018 przez ShiroUmizake Nałogowiec (46,300 p.)

Możesz poprawić media-queries ręcznie.

komentarz 23 kwietnia 2018 przez w2 Obywatel (1,110 p.)

To nie o to chodzi. Ale chyba znalazłem już problem. Zrobiłem błąd logiczny w pytaniu wyżej zadanym.
Weźmy taki smartphone jak: SAMSUNG GALAXY S7 EDGE.
Jego specyfikacja która nas interesuje to: 1440 x 2560 px (5,50") 534 ppi.

Parametr 534ppi (pixels per inch – pikseli na cal) jest parametrem widocznosci punktów na ekranie.
PPI dla tego smartphona oblicza sie tak:
(√ (1440 ² + 2560 ² )) / 5,50 = 534ppi, i jest to rozdzielczość widoczna na ekranie.
Tu jest kalkulator na gotowe przeliczanie:
https://www.omnicalculator.com/other/pixels-per-inch

Tu jest specyfikacja ppi na rożne telefony:
https://en.wikipedia.org/wiki/Comparison_of_high-definition_smartphone_displays
1.)Wynika z niej, że na 5,5calach (140mm) przekątnej, mamy 534ppi,
2.)534ppi z twierdzenia Pitagorasa bedzie rowne: 2937px
3.)2937px / 5,5cala = 524ppi
4.)1440px /5,5cala = 261,8 ppi (na szerokosc ekranu)

Samsung

Galaxy S7 Edge

March 2016

Android 6.0.1

Super AMOLED

2560x1440

5.5 in (140 mm)

534

Ciekawostka. Jesli chodzi o jednostki ppi (za wiki):
W zależności od urządzenia wyjściowego (monitor, drukarka, naświetlarka) przyjęto następujące wartości ppi, uznawane za wystarczające dla uzyskania ergonomicznego, niepostrzępionego obrazu:

72-100 ppi	obrazy wyświetlane na monitorach i wyświetlaczach
150-200 ppi	wydruki średniej jakości na drukarkach domowych i biurowych
300 ppi	wydruki o jakości fotograficznej, obrazy przeznaczone do druku offsetowego
400 ppi	naświetlarki fotograficzne do uzyskiwania odbitek najwyższej jakości
250-800 ppi	obrazy na wyświetlaczach telefonów komórkowych

Problem zlokalizowany. I już wiem gdzie tkwi haczyk, Ale nie mogę znaleźć innego przelicznika.
Tu jest inny przykład, dla którego mogę porównać dane:

Samsung

Galaxy S5

March 2014

Android 4.4.2

FHD Super AMOLED

1080x1920

5.1 in (130 mm)

431

Wynika z niego, że smartphone ma 1080px na szerokość ekranu, Przeglądarka Chrome, ma ten telefon w ustawieniach domyślnych i wg niej 1080x1920 ekranu smartphona, mieści się w rodzielczości monitora 360x640px. Wlasnie tej interpolacji szukałem, ale nie umialem jaśniej sprecyzować pytania).

Dla mnie wnioski są następujące, że smartphone Galaxy S7, ma swoją rozdzielczość (1440x2560px) a ona jest zamieniana i wyświetlana na ekranie monitora poniżej 768px. Patrz tabela wyżej: standardowy monitor: 72ppi, Samsung Galaxy S7: 534ppi. Więc dla rożnych modeli telefonów, przelicznik będzie wyglądał inaczej.

komentarz 24 kwietnia 2018 przez ShiroUmizake Nałogowiec (46,300 p.)

Pamiętaj, że Chrome emuluje a nie wyświetla.

komentarz 24 kwietnia 2018 przez w2 Obywatel (1,110 p.)
edycja 24 kwietnia 2018 przez w2

Mam już jasność i znalazłem przelicznik.
Kluczowym terminem dla tego problemu jest tu definicja: device pixel ratio

Chodzi o przelicznik rozdzielczości fizycznej ekranów urzadzen mobilnych - na pixele projektowane w arkuszach CSS.

Wiec dla przykładu 10 topowych smarfonow będą to rozdzielczosci FIZYCZNE, emulowane na CSS:

(1440 x 2560 px)
1.samsung S7, ------> 360x640px
2.LG G7, ------> 360x640px
3.SAMSUNG GALAXY S7 EDGE; ------> 360x640px
7.SAMSUNG GALAXY S6 ------> 360x640px
----------------------------------------------------------
(1080 x 1920 px)
4.XIAOMI REDMI NOTE 4X ; ------> 360x640px
5.XIAOMI REDMI NOTE 4; ------> 360x640px
9. HUAWEI P9 LITE; ------> brak danych (ale wg mnie 360x640px)
10.XIAOMI MI A1 ------> brak danych (ale wg mnie 360x640px)
----------------------------------------------------------
(750 x 1334 px)
6.APPLE IPHONE 7 ------> 375x667px
----------------------------------------------------------
(720 x 1280 px)
8.HUAWEI P8 LITE ------> brak danych

Poniżej przydatny link na jednostki miar do praktycznego zastosowania: dla powyższych, i wielu innych urządzeń:
http://www.mydevice.io/
A tu obszerniejsze wyjaśnienie problemu:
https://stackoverflow.com/questions/8785643/what-exactly-is-device-pixel-ratio

Podsumowująco dodam, że wprowadzone przeze mnie, ręcznie, rozdzielczości 5 smartfonów przed poziomą kreską (patrz 1wsza grafika) - jest kompletnie do ( . ). Wobec tego pytanie w tytule tematu też jest bez sensu = do ( . ).