Pytanie Jak działa bootstrap na pełnych urządzeniach hd (1920 × 1080)?


The Bootstrap samouczek mówi, że to .col-xs-* na urządzenia mobilne (<768px). Moje pytanie jest takie, że jeśli zrobię stronę internetową dla małych telefonów komórkowych za pomocą .col-xs-* klasy wtedy reguła css będzie stosowana tylko do tych urządzeń, które mają szerokość mniejszą niż 768px. Obecnie istnieją pełne telefony komórkowe hd, które mają szerokość 1080px na 5-calowym wyświetlaczu. Czy te telefony komórkowe zachowają się jak komputer stacjonarny (≥992px) dla mojego bootstrap css? Chcę, aby moje css były takie same dla każdego urządzenia mobilnego o przekątnej 5 cali, czy to HD czy Full HD.


18
2018-03-24 11:28


pochodzenie


Masz poprawną odpowiedź. - Bhojendra Nepal
@BojejendraNepal Jaka jest odpowiedź? Pełny telefon HD będzie traktowany jako urządzenie stacjonarne, więc moja witryna będzie renderować inaczej. Jak sprawić, aby strona internetowa była taka sama na każdym telefonie komórkowym 5 "Czy istnieje sposób na wykorzystanie zapytań o media o fizycznej szerokości ekranu w calach? - user31782
Pasuje do szerokości piksela na cal. - Bhojendra Nepal
@BhojendraNepal Chyba CSS używa czegoś takiego jak piksel logiczny. O ile mogę zauważyć z twojej podpowiedzi, myślę, że każdy telefon komórkowy 5 "ma logiczną szerokość pikseli mniejszą niż 768, nawet jeśli ma 1080 pikseli fizycznej szerokości. - user31782
Wyświetlacz 5 'pomnożyłby się o 5 1px == 5px - Bhojendra Nepal


Odpowiedzi:


TL; DR

Piksele CSS nie są równe pikselom fizycznym. Pozwól każdemu urządzeniu / przeglądarce określić, w jaki sposób mają wyświetlać Twoje treści, najprawdopodobniej je poprawią.

Excursion: Zapytania o media Bootstraps

Najpierw przyjrzyjmy się, jak działa Bootstrap. Gdzieś w standardowym pliku bootstrap.css znajdziesz ten kod (nieco zmodyfikowany i skrócony ze względu na prostotę):

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Kodeks bez ogródek pożyczone z oficjalne dokumenty startowe.

Jaką rozdzielczość ma twój ekran?

Jak zatem określa Twoja przeglądarka, które zapytania o media są trafne? Załóżmy, że ma właściwość, którą chciałbym wywołać magicalWidth Na razie.

Twoja przeglądarka jest porównywalna magicalWidth z @media (min-width: @screen-sm-min) i jeśli magicalWidth jest większa niż lub równa @screen-sm-min zajmuje wszystkie definicje w środku { ... } pod uwagę, w przeciwnym razie po prostu je ignoruje. To samo dotyczy wszystkich innych zapytań o media.

Teraz, co jest magicalWidth? Mogę powiedzieć, że to najprawdopodobniej nie szerokość ekranu lub okna przeglądarki w (fizycznych) pikselach. CSS używa pojęcia piksele logiczne obliczyć każdy pomiar i nasz magicalWidth z góry jest dokładnie taka sama szerokość okna urządzenia lub przeglądarki logiczny piksele. Możesz dość łatwo to sprawdzić samodzielnie, spójrz na następujący przykład:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="col-sm-6 col-md-4 col-lg-3" style="background-color:#f00;">Test 1</div>
  <div class="col-sm-6 col-md-4 col-lg-3" style="background-color:#ff0;">Test 2</div>
  <div class="col-sm-6 col-md-4 col-lg-3" style="background-color:#0f0;">Test 3</div>
  <div class="col-sm-6 col-md-4 col-lg-3" style="background-color:#0ff;">Test 4</div>
</div>

Jeśli spojrzysz na to w pełni na swoim komputerze i powiększysz, zauważysz, jak układ się zmienia, aż wszystkie kolki są po prostu ułożone (tj. Domyślne zachowanie dla małych wyświetlaczy), nawet jeśli nie zmieniłeś rozdzielczości ekranu lub wielkość okna przeglądarki.

To samo dotyczy telefonu: podczas wyświetlania treści przeglądarka nie korzysta z fizycznych pikseli, ale piksele logiczne określające rozmiar ekranu.

Meta-tag w aplikacji Viewport

Aby to zrobić, tworzy wirtualną rzutnię, w której renderuje zawartość, a następnie skaluje ją do rozmiaru ekranu. Teraz możesz zdecydować o wielkości tego widoku z

<meta name="viewport" content="width=...">

... może być na przykład stałym rozmiarem

<meta name="viewport" content="width=600">

spowoduje, że wirtualna rzutnia, w której wszystko jest renderowane, ma szerokość 600 pikseli. ... może być również specjalny rozmiar device-width co oznacza, że ​​szerokość ekranu będzie równa szerokości ekranu w pikselach logicznych. Bootstrap zaleca następujący znacznik rzutni:

<meta name="viewport" content="width=device-width, initial-scale=1">

Więc mamy width=device-width. Druga część initial-scale=1 oznacza, że ​​strona powinna być początkowo renderowana na poziomie powiększenia 100%.

Aby uzyskać bardziej szczegółowe wyjaśnienie, zobacz Artykuł MDN o rzutni.

Stosunek między fizycznym i logicznym

Jest też rzecz nazwana device-pixel-ratio który określa stosunek między pikselami fizycznymi i logicznymi. Na przykład, jeśli twój telefon ma pełny ekran HD i device-pixel-ratio 3, jego rozdzielczość logiczna będzie wynosić (1920/3) x (1080/3) = 640x360 i jest znacznie poniżej najniższego punktu przerwania Bootstraps. Gdyby device-pixel-ratio wynosi 2, rozdzielczość logiczna wyniesie 960x540.

btw: Możesz użyć device-pixel-ratio także w zapytaniach o media:

@media (min-device-pixel-ratio:2) { ... }

Dolna linia

Korzystaj z Bootstrapa lub innych responsywnych frameworków lub własnych zapytań o media, ale lubisz i pozwól każdemu urządzeniu / przeglądarce dowiedzieć się, w jaki sposób powinny wyświetlać twoje treści, najprawdopodobniej je poprawią (ale to nie znaczy, że nie powinieneś uruchom testy, aby się upewnić)


17
2018-03-27 17:11



Dzięki za wyjaśnienie. Czy możesz również wyjaśnić, jak powiększanie wpływa na rozdzielczość logiczną. Dlaczego powiększanie w dół zmniejsza rozdzielczość logiczną? Czy tag meta viewport jest również używany przez agenty użytkownika komputera? - user31782
@ user31782 Co do pierwszych pytań: spójrz na logiczną rozdzielczość (lr), device-pixel-ratio (dpr) i rozdzielczości fizycznej (pr) jako trójka wartości. pr jest stały i zawsze pr = lr * dpr. Układ jest wykonany przy użyciu lr, wtedy wszystko się mnoży dpr i renderowane za pomocą pr. Więc powiększanie oznacza tylko, że się zwiększasz dpr i zmniejszyć lr przez ten sam czynnik. Co do meta-viewport-tag: szczerze mówiąc, nie wiem, po prostu go używam i ufam, że każda przeglądarka zrobi to, co trzeba. ;) PS: Te skróty nie są standardem, po prostu musiałem skrócić czas. - mmgross
Nie widzę, gdzie część Bootstrap jest wyjaśniona, ale ta odpowiedź wyjaśnia jedynie związek pomiędzy logicznymi i fizycznymi pikselami, która jest całkowicie poprawna. Pozwól każdemu urządzeniu / przeglądarce określić, w jaki sposób mają wyświetlać Twoje treści, najprawdopodobniej je poprawią. Nie, nie mają tego prawa, chyba że jeden określa stosunek urządzenia do pikseli w zapytaniach o media (o których wspomniała twoja odpowiedź) lub w tagu viewport (którego Bootstrap faktycznie używa i czego nie wspomniałeś) - bugwheels94
Dzięki za wejście. Zakładam, że OP czyta dokumenty Bootstrap, w których wziernik jest już wymieniony, więc go opuściłem. Masz rację, powinienem przynajmniej wspomnieć o znaczniku widoku, zmienię odpowiedź. Ale nie jest tak, ponieważ sugerujesz albo zapytania o media, albo znacznik widoku. Znacznik widoku jest tym, co powoduje, że przeglądarka używa prawidłowej szerokości dla @media (min-width: ... ). Również wspominając device-pixel-ratio było bardziej na marginesie, ważne rzeczy są w 2 sekcjach powyżej tego, o którym wspominam device-pixel-ratio. - mmgross


Jeśli widzisz, że starannie bootstrap potrzebuje Okienko o nazwie metatag

<meta name="viewport" content="width=device-width, initial-scale=1">

Zobacz użycie tego tagu w Bootstrap

Co zrobić, jeśli ktoś nie używa tego znacznika?

Bez tego metatagu bootstrap będzie działał tak, jak wyjaśniłeś w swoim pytaniu

Teraz, jeśli widzisz metatag, istnieje właściwość o nazwie width który jest ustawiony na device-width.

Co to jest szerokość urządzenia?

Gdy idziesz na rynek i kupujesz telefon HD o rozdzielczości 1080 * 1920, jest też coś, co nazywasz stosunek pikseli urządzenia związane z każdym urządzeniem (waha się od 1,2,3,4 i tak dalej w przypadku urządzeń HD).

Jak obliczana jest szerokość urządzenia?

szerokość urządzenia jest obliczana za pomocą wzoru

device-width = real-width / device-pixel-ratio

Szerokość urządzenia ustawia szerokość strony na logiczną Piksele CSS i przychodzi około 360px lub 480px. (voila teraz każdy telefon jest taki sam)

Jakie piksele są używane w zapytaniach o media, na podstawie których tworzony jest bootstrap?

Zapytania o media używają pikseli CSS, które teraz są zmieniane na mniej więcej 360 * 480.

Bez metatagu z widocznym obszarem miał 1080 pikseli szerokości CSS, ale z tym tagiem jest teraz około 360 lub 480 pikseli CSS.


Dla przykład jeśli kupisz notebooka Lenovo K3 Note of resolution 1920 * 1080 który ma stosunek pikseli urządzenia 3, wtedy szerokość urządzenia będzie

1080/3 = 360px

która zostanie ustawiona na właściwość width meta tagu viewport.


6
2018-03-27 16:20



Dzięki za wyjaśnienie. Myślę, że według współczynnika pikseli masz na myśli stosunek urządzenia do pikseli nie proporcje pikseli. - user31782
@ user31782 tak mam na myśli stosunek pikseli urządzenia - bugwheels94


5 cali można przetłumaczyć na 480px w osi y. Każdy 5-calowy wyświetlacz mobilny ma zwykle mniej niż 768 pikseli. Wymiary nie obliczają rozdzielczości ekranu, ale rzeczywiste wymiary. Mam 5-calowy ekran 1080 full hd Telefon z systemem Android, a także telefon Android o niskiej rozdzielczości 540 x 960 pikseli i to 4,3-calowy ekran, który może przełożyć do 412.8px na osi Y. i wszystkie zachowują się w ten sam sposób, kiedy używam .col-xs-* bootstrap css.

Mój werdykt

W odniesieniu do Odpowiedź tutaj i tutaj

rozumiem, że punkty przerwania CSS opierają się na szerokości urządzenia, a nie rozdzielczości ekranu.


1
2018-03-27 15:06