Forum PHP.pl

Właśnie testuje różne rozwiązania RWD na swojej stronie i napotkałem mały problem...

Otóż mój telefon ma rozdzielczość FHD iphone ma rozdzielczość: 1136 x 640 Jak teraz mogę przygotować stronę żeby tu i tu wyświetlała się podobnie ?

Oczywiście mamy media queries tylko co z tego że zaznacze tam max-width 600px jak w telefonie mam rozdzielczość większa niż w monitorach ?

Jeżeli nie chcesz uzależniać tego od rozdzielczości, to po prostu sprawdzaj czy to urządzenie mobilne czy nie.

Po prostu zastanawiam się jak ten temat ugryźć, chciałbym wyświetlenie strony uzależnić od rozdzielczości ale z tego co widzę w większości telefonów załaduje mi się duża wersja strony. Inną sprawą jest to że nawet jeśli jakimś cudem wykryje że to urządzenie mobilne to przy różnych rozdzielczościach telefonów na jednym bloczek będzie miał np. 200px i zajmował 1/3 ekranu a na innym 1/6 ekranu...

Jest jakaś możliwość aby stronę przygotować w rozdzielczości np. 600px (dzięki temu większość elementów będzie odpowiednio duża) a telefony same będa ją skalowały do swoich ekranów ?

Teraz jak wyświetlam oryginalną stronę to tak właśnie się dzieje, każdy telefon skaluje ją do swojego ekranu i trzeba ją potem powiększać.

Poza szerokością musiałbyś jeszcze sprawdzać stosunek CSS-owych pikseli do faktycznych pikseli: http://css-tricks.com/snippets/css/retina-...ay-media-query/

PS. 1136 x 640 z FullHD nie ma nic wspólnego.

Osobiście podejrzewam, że powinien tutaj być przecinek

Jest taka strona: zerotheme(dot)com, sprawdź jak tam to robią. Ja z tego korzystam i nie istotne jaka rozdzielczość, strona wyświetla się tak jak powinna od wielkości ekranu.

I o to właśnie chodzi, jak tel/tablet ma rozdzielczość taką jak monitory komputerów to logiczne że stronę wyświetlasz taką jaka jest stworzona dla ekranu komputera, nie ma sensu tego rozdrabniać na rozdzielczość tel/kom.

Od całkiem niedawna w chrome jest fajny emulator urządzeń mobilnych z uwzględnieniem pixel ratio. To że twój telefon potrafi wyświetlać rozdzielczość full hd, wcale nie oznacza, że obraz nie jest skalowany. A właśnie tak się dzieje, że ów obraz najczęściej jest skalowany. Więcej na temat tego emulatora poczytasz tutaj: https://developer.chrome.com/devtools/docs/device-mode

Nawet jeżeli chcesz wyświetlić na urządzeniu mobilnym które ma sporą rozdzielczość (via telewizory 4k na androidzie) to warto stworzyć osobne style, które poprzez kliknięcie, czy wcześniejsze sprawdzenie useragenta są dodawane do head.

A zupełnie najważniejszą rzeczą jest pisanie takiego kodu i projektowanie strony żeby nie było za dużo elementów których nie da się skalować procentowo (via layout zaprojektowany do jednej rozdzielczości).

PS. gdyby na 5 calowym ekranie wyświetlał się dokładnie obraz full hd, to 15 pixelowa czcionka wyglądałaby jak plamki. Stąd skalowanie.

Ten post edytował by_ikar 24.09.2014, 14:47:43

chyba znalazłem sposób, projektujemy stronę tak aby wyświetlała się poprawnie przy zmianie szerokości okna w przeglądarce korzystając z media queries a w meta tagach strony dodajemy:

[HTML] pobierz, plaintext 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
[HTML] pobierz, plaintext 

dzięki temu strona wyświetla się zawsze tak jak powinna czyli korzystając z rozdzielczości po przeskalowaniu w telefonie. Swoją drogą trochę to bezsensu że producenci podają natywną rozdzielczość bez podawania rozdzielczości po przeskalowaniu. Mam lumię i nie mam pojęcia jaką mój ekran ma rozdzielczość po przeskalowaniu ( z testów wyszło mi że coś koło 500px...)

Zastanawiam się jeszcze jak ten metatag wpłynie na wyświetlanie zdjęć np. na retinie (czy zostanie zignorowany i mając 4x większe zdjęcie wyświetli się mega ostre) czy może zdjęcie nie zostanie przeskalowane i otrzymam po prostu 4x większe zdjęcie na ekranie...

Retina to nic innego jak piękne marketingowe określenie wyświetlacza o zagęszczeniu pikseli większym niż bodajże 220ppi na cal. Co daje rozdzielczość 960x640 na 3.5 calowy wyświetlacz. Czyli nic niezwykłego dla telefonów z wyższej półki.. A co do viewportu, to wydawało mi się że to jest oczywiste od czego się zaczyna tworzenie responsywnego layoutu i nie, ten tag w mobilnych przeglądarkach (nie licząc ich minimalistycznych wersji - via opera mini etc) nie jest ignorowany. Zresztą, sposób żeby sprawdzić jak to będzie wyglądać już ci dałem, w chrome możesz sobie to przeskalować i sprawdzić jak to będzie wyglądało, więc nie wiem w czym problem.