• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

VPS Starter Arubacloud
+1 głos
1,231 wizyt
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

0 głosów
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 (monitordrukarkanaś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 ( . ).

0 głosów
odpowiedź 24 kwietnia 2018 przez w2 Obywatel (1,110 p.)
edycja 24 kwietnia 2018 przez w2

EDYTUJE na nowo tytuł tematu, bo problem dotyczy innego zagadnienia.
Było: Responsywność Bootstrap'a, a RWD w najnowszych smartfonach
Jest: Emulacja rozdzielczości fizycznej ekranów smartfonów na rozdzielczość CSS.

Podobne pytania

0 głosów
2 odpowiedzi 219 wizyt
pytanie zadane 8 lipca 2020 w HTML i CSS przez Author[] Gaduła (3,130 p.)
+1 głos
3 odpowiedzi 2,417 wizyt
pytanie zadane 18 czerwca 2017 w HTML i CSS przez rafal1997 Gaduła (3,180 p.)
0 głosów
1 odpowiedź 478 wizyt

92,453 zapytań

141,262 odpowiedzi

319,086 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...