Forum PHP.pl > [HTML]Pełne skalowanie strony.

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML]Pełne skalowanie strony.

MadManix

19.08.2016, 21:54:51

Witam,
W jaki sposób są tworzone strony internetowe, które są całkowicie skalowalne? Przykładowa strona: dhl.com.pl

Gdy wyświetlam ją na swoim telefonie (przeglądarka blackberry 7.1.0) - każdy element strony jest pomniejszony, wyskalowany proporcjonalnie do tego co pokazałoby się na zwykłym ekranie komputera. Czcionka jest pomniejszona, nieczytelna, trzeba powiększyć ekran żeby móc cokolwiek przeczytać - właśnie szukam czegoś takiego.

Tam, do określania wielkości czcionki, używają jednostek em. Kiedy stosuję u siebie te jednostki - nie daje tego efektu, podobnie z %, px. Jednostki vw, vh odpadają - przeglądarka ich nie obsługuje.

Czy ustawia się to może za pomocą jakiegoś meta tagu? Aktualnie mam:

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

vokiel

19.08.2016, 22:11:56

Strona DHLa to chyba zły przykład, bo ona akurat się nie skaluje.

MadManix

19.08.2016, 22:21:44

Cytat(vokiel @ 19.08.2016, 23:11:56 )

Strona DHLa to chyba zły przykład, bo ona akurat się nie skaluje.

ok, to w takim razie użyłem złego pojęcia, być może nie nazywa to się skalowanie. W każdym razie gdy odpalam ich stronę na komórce wszystko jest pomniejszone, muszę użyć zooma i przybliżyć obraz aby móc coś przeczytać. Podobnie wyświetlają mi się strony allegro.pl (jeżeli się wyjdzie z trybu mobilnego), tme.eu.

Comandeer

19.08.2016, 22:58:18

Strona DHL jest po prostu nieprzystosowana do urządzeń mobilnych i to skalowanie jest wykonywane przez samą przeglądarkę. Więc żeby uzyskać taki efekt, wystarczy… źle napisać stronę

MadManix

19.08.2016, 23:54:30

Jeszcze jeden przykład atmel.com. Tutaj div "content" ma sztywno ustawioną szerokość na 980px. Kiedy ja na mojej stronie ustawię 980px - nie daje tego efektu. Pojawia się poziomy suwak. Oczywiście mogę ekran oddalić przy pomocy zooma ale na stronie Atmela jest to już domyślnie oddalone, dopasowane do szerokości ekranu, bez poziomego suwaka. I nie rozumiem na czym to polega.

Kerth

20.08.2016, 00:47:50

Wywal całkowicie ten metatag, bo nie wnosi on nic do tematu. Co do pełnego skalowania strony-jest to nic innego jak stosowanie niedynamicznych elementów blokowych(div) posługujśc się z pixelami. Każde użycie % czy auto stwarza pewien fragment responsywności, przypasowując stronę do przeglądarek mobilnych. To tak w skrócie.

[PHP] pobierz, plaintext 
<!doctype html>
<html>
     <head>
     <style>.content { wisth:900px; height: 60px; padding: 2px; border : 1px black solid }</style>
     </head>
     <body>
<div class="content">Jakiś tekst w boxie. Przybliż, aby zobaczyć więcej</div>
     </body>
</html>
[PHP] pobierz, plaintext

Pisane z telefonu. Zapisz to sobie, uruchom na telefonie i zobacz efekt.

MadManix

20.08.2016, 10:06:33

OK, dziękuję. Działa.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.