Soru Önyükleme tam hd (1920 × 1080) cep telefonlarında nasıl çalışır?


Önyükleme öğreticisi dahil diyor .col-xs-* mobil cihazlar için (<768px). Sorum şu; eğer küçük cep telefonları için bir web sitesi kullanıyorsam .col-xs-* sınıflar sonra bu css kuralı sadece 768 pikselden daha az genişliğe sahip olan cihazlara uygulanacaktır. Günümüzde 5 inçlik ekranda 1080px genişliğe sahip tam hd cep telefonları var. Yani bu mobil, bootstrap css için Masaüstü bilgisayar (≥992px) gibi davranır mı? CSS'nin HD veya Full HD olmak üzere 5 inç ekranlı bir mobil cihaz için aynı olmasını istiyorum.


18
2018-03-24 11:28


Menşei


Doğru cevabın var. - Bhojendra Rauniyar
@BhojendraNepal Cevap nedir? Tam bir hd telefon bir masaüstü cihaz olarak ele alınacak, bu yüzden web sitem bu konuda farklı bir şekilde çalışacaktır. Web sitemizi 5 "mobilde aynı hale nasıl getirebilirim? Ekranın fiziksel genişliğini inç cinsinden ortam sorguları ile kullanmanın bir yolu var mı? - user31782
İnç başına piksel genişliğini eşleştirir. - Bhojendra Rauniyar
@BhojendraNepal Sanırım CSS, Mantıksal piksel gibi bir şey kullanıyor. İpucunuzdan ayırt edebileceğiniz kadarıyla, her 5 "mobilin, 1080 fiziksel piksel genişliğinde olsa bile, 768'den daha az mantıksal piksel genişliği olduğunu düşünüyorum. Doğru muyum? - user31782
5 'ekranı 5 ile çarpacaktır. 1px == 5px - Bhojendra Rauniyar


Cevaplar:


TL; DR

CSS pikselleri, fiziksel piksellere eşit değildir. Her bir cihaz / tarayıcı, içeriğinizi nasıl görüntülemesi gerektiğini anlasın, büyük ihtimalle doğru anlar.

Gezi: Bootstraps medya sorguları

İlk olarak, Bootstrap'in nasıl çalıştığına bir bakalım. Standart bir bootstrap.css bir yerde bu kodu bulacaksınız (biraz değiştirilmiş ve sadelik uğruna kısaltılmış):

/* 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) { ... }

Kod açıkça ödünç itibaren resmi bootstrap belgeleri.

Ekranınızın çözünürlüğü nedir?

Peki, tarayıcınız hangi medya sorgularının uygun olduğunu nasıl belirler? Aramak istediğim bir mülkün olduğunu varsayalım magicalWidth şimdilik.

Tarayıcınız karşılaştırır magicalWidth ile @media (min-width: @screen-sm-min) ve eğer magicalWidth büyüktür veya eşittir @screen-sm-min içindeki tüm tanımları alır { ... } hesaba katılırsa, aksi halde göz ardı edilir. Aynı şey diğer tüm medya sorguları için de geçerlidir.

Şimdi, ne magicalWidth? Size en olası olduğunu söyleyebilirim değil (fiziksel) piksellerde ekranınızın veya tarayıcı pencerenizin genişliği. CSS kavramını kullanır mantıksal piksel herhangi bir ölçümü hesaplamak ve magicalWidth yukarıdan tam olarak cihazınızın veya tarayıcınızın penceresinin genişliği mantıksal piksel. Bunu kolayca kendiniz test edebilirsiniz, aşağıdaki örneğe bir göz atın:

<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>

Buna tam olarak bilgisayarınızda bakarsanız ve yakınlaştırırsanız, ekranınızın çözünürlüğünü değiştirmemiş olsanız bile, düzen tüm yığınlar sadece yığılmış olana (yani küçük ekranlar için varsayılan davranış) kadar değişir. veya tarayıcı pencerenizin boyutu.

Aynı şey telefonunuz için de geçerlidir: İçeriği görüntülerken, tarayıcınız ekranın boyutunu belirlemek için fiziksel pikseller değil mantıksal pikseller kullanmaz.

Viewport meta etiketi

Bunu yapmak için içeriği oluşturduğu ve daha sonra ekranınızın boyutuna ölçeklediği sanal bir görünüm penceresi oluşturur. Artık o viewport'un boyutuna karar verebilirsiniz.

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

... örneğin sabit bir boyut olabilir

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

her şeyin 600 piksel genişliğinde oluşturulduğu sanal görünüm alanına neden olur. ... özel boyut da olabilir device-width Bu, görünümün mantıksal piksellerde ekranınız kadar geniş olacağı anlamına gelir. Bootstrap şu viewport etiketini önerir:

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

Böylece sahibiz width=device-width. Diğer kısmı initial-scale=1 sayfanızın başlangıçta% 100 yakınlaştırma düzeyinde oluşturulması gerektiği anlamına gelir.

Daha ayrıntılı bir açıklama için bkz. Viewport hakkındaki MDN makalesi.

Fiziksel ve mantıksal arasındaki oran

Ayrıca denen bir şey var device-pixel-ratio Fiziksel ve mantıksal pikseller arasındaki oranı belirler. Örneğin, telefonunuzun tam bir HD ekranı ve bir device-pixel-ratio 3, onun mantıksal çözünürlüğü (1920/3) x (1080/3) = 640x360 olacak ve bu Bootstraps en düşük kesme noktasının çok altında. Eğer device-pixel-ratio 2, mantıksal çözünürlük 960x540 olacaktır.

btw: Kullanabilirsin device-pixel-ratio ayrıca medya sorgularında:

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

Alt çizgi

Bootstrap'i veya başka bir duyarlı çerçeveyi veya kendi medya sorgularınızı kullanın, ancak istediğiniz her cihaz / tarayıcı içeriğinizi nasıl görüntülemeleri gerektiğini anlamaya çalışın, büyük olasılıkla doğru bir şekilde elde edeceklerdir (ancak bu sizin emin olmak için testleri çalıştırın)


18
2018-03-27 17:11



Açıkladığın için teşekkürler. Yakınlaştırmanın mantıksal çözünürlüğü nasıl etkilediğini de açıklayabilir misiniz? Yakınlaştırma neden mantıksal çözünürlüğü azalttı? Ve bilgisayar kullanıcı aracıları tarafından kullanılan meta viewport etiketi de mi? - user31782
@ user31782 İlk sorularınız için: Mantıksal çözünürlüğe bakın (lr), device-pixel-ratio (dpr) ve fiziksel çözünürlük (pr) bir üçlü değerler olarak. pr sürekli ve daima pr = lr * dpr. Düzenleme kullanılarak yapılır lrsonra her şey ile çarpılır dpr ve kullanılarak oluşturuldu pr. Yani yakınlaştırma, sadece arttığınız anlamına gelir dpr ve azalt lr aynı faktör tarafından. Meta-viewport etiketine gelince: Gerçekten bilmiyorum, sadece onu kullanıyorum ve her tarayıcının doğru şeyi yapacağına güveniyorum. ;) PS: Bu kısaltmalar herhangi bir standart değil, sadece işleri kısaltmam gerekiyordu. - mmgross
Önyükleme bölümünün nerede açıklandığını göremiyorum, bunun yerine sadece bu cevap tamamen doğru olan mantıksal ve fiziksel pikseller arasındaki ilişkiyi açıklıyor. Her bir cihaz / tarayıcı, içeriğinizi nasıl görüntülemesi gerektiğini anlasın, büyük ihtimalle doğru anlar. Hayır, medya sorgularında (sizin cevabınız) veya viewport etiketinde (Bootstrap'ın gerçekte kullandığı ve bahsetmediğiniz) aygıt piksel oranını belirtmedikçe, bu haktan yararlanamazlar. - bugwheels94
Giriş için teşekkürler. OP'nin, görüntü alanının zaten belirtildiği Bootstrap belgelerini okuduğunu varsaydım, bu yüzden onu dışarıda bıraktım. Haklısınız, en azından viewport etiketinden bahsetmeliyim, cevabımı değiştireceğim. Ancak, medya sorgularını veya viewport etiketlerini önerdiğinizden değil. Viewport etiketi, tarayıcının doğru genişliği nasıl kullandığını @media (min-width: ... ). Ayrıca, söz device-pixel-ratio bir yan not daha vardı, önemli şeyler bahsettiğim yukarıda 2 bölümden device-pixel-ratio. - mmgross


Dikkatli bir şekilde bootstrap gerekiyorsa bir viewport adlı meta etiket

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

Bu etiketin Bootstrap'te kullanımını görün

Ya birisi bu etiketi kullanmazsa?

Bu meta etiketi olmadan bootstrap, sorunuzda açıkladığınız gibi çalışır

Şimdi meta etiketini görürseniz, bir özellik var demektir width için ayarlanan device-width.

Şimdi, cihaz genişliği nedir?

Piyasaya gittiğinizde ve 1080 * 1920 çözünürlükte bir HD telefon satın aldığınızda, aynı zamanda cihaz pikseli oranı Her cihazla ilişkili (1,2,3,4 ans aralıklarla HD cihazlarda artışlar).

Cihaz genişliği nasıl hesaplanır?

cihaz genişliği formül kullanılarak hesaplanır

cihaz genişliği = gerçek genişlik / cihaz pikseli oranı

Cihaz genişliği, sayfanın genişliğini mantıksal olarak ayarlar CSS pikselleri ve 360px veya 480px geliyor (şimdi her telefon aynı)

Medya sorguları hangi önyüklemenin oluşturulduğunu kullanır?

Medya sorguları, artık 360 * 480 gibi bir değere dönüştürülen CSS piksellerini kullanır.

Viewport meta etiketi olmadan, genişlikte 1080 CSS piksel vardı, ancak bu etiketle şu anda 360 veya 480 CSS pikseli var.


İçin örnek bir Lenovo K3 çözünürlük alırsanız * 1080 1920 cihaz piksel oranı 3 olan cihaz genişliğinden sonra

1080/3 = 360 piksel

viewport meta etiketinin width özelliğine ayarlanacak.


6
2018-03-27 16:20



Açıkladığın için teşekkürler. Tahmin ettiğim piksel oranıyla tahmin ediyorum. Cihaz piksel oranı değil piksel en boy oranı. - user31782
@ user31782 evet, cihaz pikseli oranını kastettim - bugwheels94


5 inç, y ekseninde 480px'e çevirebilir. 5 inç ekranlı herhangi bir seyyar telefon genellikle 768 pikselden daha azdır. Boyutlar ekran çözünürlüğünü değil gerçek boyutları hesaplar. Ben 5 inç ekran 1080 full hd var android telefon ve aynı zamanda 540x960 piksel bir düşük çözünürlüklü android telefon ve bu y ekseninde 412.8px çevirebilir bir 4.3inch ekran. ve ben hepsini kullandığımda hepsi aynı şekilde davranır .col-xs-* bootstrap css.

Kararım

Ya referans olarak Cevap burada ve İşte

Anladığım kadarıyla, CSS kesme noktaları ekran genişliğine değil cihaz genişliğine güveniyor.


1
2018-03-27 15:06