@media: jeśli samsung galaxy s4 to 1920x1080?

Question

<link rel="stylesheet" media="only screen and (max-width:1280px)" href="css/article1280.css"> 

Jestem w trakcie kodowania mojego responsywnego CSS i zdałem sobie sprawę, że smartfon Samsung Galaxy S4 ma rozdzielczość ekranu 1080x1920 - mój monitor 23 "to 1920 x 1080. Nigdy nie przeglądałem tego telefonu (mam iPhone 3 o rozdzielczości 320x480, który uważałem za smartfony około, gdzieś poniżej 800 pikseli szerokości), więc jestem nieco zakłopotany. Jak mam stworzyć mobilną stronę internetową dla smartfona z rozdzielczością ekranu ? od 1080x1920

Answer 1

niektórych zapytań multimedialnych, które mogą okazać się przydatne w tym przypadku to:

@media screen and (orientation: portrait | landscape) { ... } 

@media screen and (device-aspect-ratio: #/#) { ... } 

Oto link z dodatkowymi informacjami: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Answer 2

użyj @media screen and (max-device-width: your dimension here).

Answer 3

Galaxy S4 donosi 360 pikseli x 640 do przeglądarki

Proporcje jest 9/16

stosunek Pixel jest 3

@media screen and (max-device-width: 360px) 

@media screen and (-webkit-min-device-pixel-ratio: 3) 

@media screen and (device-aspect-ratio: 9/16) 

Answer 4

Przy projektowaniu na GS4 renderuje jako zwykły panoramiczny chyba używasz znacznika rzutni w swoich nagłówkach. Wysłałem przykład, którego używam, aby był responsywny @Samsung Galaxy S4 Responsive Design @media

Answer 5

Upewnij się, że masz metatag z widocznym obszarem w sekcji head. Coś takiego:

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

To mówi użytkownikowi użytkownika, aby wziął pod uwagę gęstość pikseli i odpowiednio przeskalował. Więc twój Samsung Galaxy S4 o szerokości 1080p będzie działał jak ekran o szerokości 360 pikseli.

Answer 6

Testowany i działa!

@media screen and (-webkit-min-device-pixel-ratio: 3.0) and (max-width: 1080px), screen and (max-width: 480px)