• 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).

0 głosów
205 wizyt
pytanie zadane 23 kwietnia 2018 w HTML i CSS przez willet2 Użytkownik (530 p.)
edycja 24 kwietnia 2018 przez willet2

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 (44,920 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 willet2 Użytkownik (530 p.)
edycja 23 kwietnia 2018 przez willet2

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 (44,920 p.)
IPADY ograliśmy wysokością ;). Nie do końca rozumiem twojego problemu.
komentarz 23 kwietnia 2018 przez willet2 Użytkownik (530 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 (44,920 p.)
Możesz poprawić media-queries ręcznie.
komentarz 23 kwietnia 2018 przez willet2 Użytkownik (530 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 (44,920 p.)
Pamiętaj, że Chrome emuluje a nie wyświetla.
komentarz 24 kwietnia 2018 przez willet2 Użytkownik (530 p.)
edycja 24 kwietnia 2018 przez willet2

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 willet2 Użytkownik (530 p.)
edycja 24 kwietnia 2018 przez willet2

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
3 odpowiedzi 669 wizyt
pytanie zadane 18 czerwca 2017 w HTML i CSS przez rafal1997 Gaduła (3,170 p.)
0 głosów
1 odpowiedź 202 wizyt
0 głosów
3 odpowiedzi 2,919 wizyt
pytanie zadane 24 stycznia 2017 w HTML i CSS przez Krzysztof Trybuś Mądrala (5,150 p.)
Porady nie od parady
Możesz ukryć, zamknąć lub zmodyfikować swoje pytanie, za pomocą przycisków znajdujących się pod nim. Nie krępuj się poprawić pochopnie opublikowanego pytania czy zamknąć go po uzyskaniu satysfakcjonującej odpowiedzi. Umożliwi to zachowanie porządku na forum.Przyciski pytania

64,868 zapytań

111,331 odpowiedzi

234,217 komentarzy

46,733 pasjonatów

Przeglądających: 219
Pasjonatów: 6 Gości: 213

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...