2011-08-16 23 views
6

Podczas odwiedzania strony internetowej na telefonie (korzystam z systemu Android), jeśli jest to zwykła strona, zmniejsza ją, aby zmieściła się na ekranie telefonu.Jak zmniejszyć mobilność strony mobilnej?

Zawsze zakładałem, że strona mobilna sprawi, że strona będzie na tyle mała, że ​​będzie całkowicie pasować do rozdzielczości ekranu telefonu bez zmniejszania.

To się jednak nie dzieje. Nawet specjalnie ustawiłem rozmiar strony na body{ width: 300px;}, ale kiedy ładuję go w telefonie, zmniejsza się on w lewym górnym rogu z dużą ilością wolnego miejsca wokół niego.

Co robię źle?

+0

mam odpowiedzieć na to pytanie, zanim: http://stackoverflow.com/questions/2977550/iphone-safari- css-rotation-bug/3188736 # 3188736 –

Odpowiedz

9

Trzeba użyć rzutni meta tag

<!doctype html> 
<html> 
<head> 
    <title>Hello world!</title> 

    <meta name="viewport" content="width=device-width"/> 
</head> 

<body> 

<p>Hello world!</p> 

</body> 
</html> 

czytać w szczegółach tutaj http://davidbcalhoun.com/2010/viewport-metatag

+0

Dzięki, że to rozwiązuje! :) –

+0

Dobra odpowiedź, ale to nadal nie pokazuje stron internetowych w ich rzeczywistym rozmiarze. 1 piksel na stronie to 1,5 piksela na ekranie mobilnym. – trusktr

0

Dzieje się tak, ponieważ szerokość ciała jest w stosunku do urządzenia do przeglądania.

Większość współczesnych telefonów symuluje przeglądarkę komputerową, więc szerokość 300 pikseli to 300 pikseli w stosunku do ogólnego okna przeglądarki. Zasadniczo zobaczysz to samo w przeglądarce na komputerze, tak jak w przeglądarce telefonu.

Idealnym rozwiązaniem jest wyświetlanie czegoś nieznacznie innego niż użytkownicy mobilni. Zwykle wycięta wersja strony, która ma większe pozycje w menu i ukrywa większość zwykłej zawartości, która nie jest konieczna. (fantazyjny nagłówek itp.).

Powiązane problemy