Przesunięcie w dół szerokości Mobile Mobile Viewport, gdy iPad jest ustawiony w orientacji pionowej? -

Pracuję nad stroną internetową zaprojektowaną do najlepszej pracy w trybie poziomym na iPadzie. Wszystko znajduje się w pojemniku o szerokości 1024px, <div>. Jednak wciąż muszę skalować w dół rzutnię, więc gdy użytkownik zmieni iPada na orientację pionową, użytkownik nie musi pomniejszać ani przewijać w poziomie, aby zobaczyć wszystko na stronie.Przesunięcie w dół szerokości Mobile Mobile Viewport, gdy iPad jest ustawiony w orientacji pionowej? -

Obecnie mam ten <meta> tag w moim <head>:

<meta name="viewport" content="width=1024px, initial-scale=1.0, maximum-scale=10.0" />

Wszystko wyświetla w porządku, gdy strona jest wyświetlana w trybie poziomym, ale nie mogę się wspomnianą wyżej wymagane zachowanie portret pracować. Próbowałem zmienić initial-scale na 0.75, a dzieje się dokładnie odwrotnie: wszystko pasuje w trybie portretu, ale jest dodatkowa przestrzeń pozioma, gdy iPad jest w trybie poziomym.

Czy istnieje ustawienie CSS, JavaScript lub specjalne ustawienie wyświetlania, które można użyć, aby to działało?

P.S. Nie mogę użyć user-scalable=no.

Źródło

2011-06-29 Phil

Możesz nawet dodać właściwości orientacji w obrębie tego samego CSS, którego używasz do przeglądarek komputerowych ... Wystarczy dodać następujące elementy;

@media only screen and (device-width:768px)and (orientation:portrait) 
/*iPad Portrait orientation styles */ 

@media only screen and (device-width:768px)and (orientation:landscape) 
/*iPad landscape orientation styles */

Znowu pamiętać iPad, urządzenie jest zawsze szerokość 768px niezależnie od orientacji ... Wiem, że to dziwne, ale tak właśnie jest ...

Można również sprawdzić bardzo dobry samouczek na ten sam pod adresem http://itunes.apple.com/in/app/designmobileweb/id486198804?mt=8

Źródło

2011-06-29 13:18:01 testndtv

Dzięki za odpowiedź. To powinno być łatwe, jeśli najpierw użyłem wzorów opartych na procentach lub em ... – Phil

Tak, poprawne ... byłoby wtedy poprawnie wyświetlane w obu orientacjach ... – testndtv

Możesz być w stanie używać orientacji konkretnej CSS tak:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

W takim przypadku prawdopodobnie będziesz musiał zmienić ustawienie rzutni do szerokości urządzenia max i dbać o rzeczywistej szerokości treści używając CSS. Na przykład, zawiń wszystko we frag z odpowiednią szerokością dla każdej orientacji, 1024px lub 768px (minus pasek stanu i chrome przeglądarki jest konieczne).

<meta id="viewport" name="viewport" content="initial-scale=1.0;minimum-scale=1.0; maximum-scale=1.0" />

Źródło

2011-06-29 12:56:50

Dzięki, zarówno hmthr's, jak i twoja odpowiedź są bardzo podobne, chciałbym zaznaczyć oba jako odpowiedzi, ale odpowiedź hmthra jest tym, czego użyłem w końcu. – Phil

Przesunięcie w dół szerokości Mobile Mobile Viewport, gdy iPad jest ustawiony w orientacji pionowej? -

Odpowiedz

Powiązane problemy