Standard SZEROKOŚCI I WYSOKOŚCI przeglądarki iPad

Czy ktoś zna najbezpieczniejszą szerokość i wysokość BODY podczas przeglądania dowolnej strony internetowej na iPadzie? Chcę jak najbardziej unikać pasków przewijania.

Dzięki.

Erik

Szerokość i wysokość strony w pikselach będzie zależeć od orientacji, a także metatagu viewport, jeśli został określony. Oto wyniki uruchomienia $ (window) .width () i $ (window) .height () jquery w przeglądarce iPad 1.

Gdy strona nie ma metatagu viewport:

• Portret: 980x1208
• Pozioma: 980x661

Gdy strona zawiera jeden z tych dwóch metatagów:

<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">

<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1">

• Portret: 768 x 946
• Pozioma: 1024x690

Z <meta name="viewport" content="width=device-width">:

• Portret: 768 x 946
• Pozioma: 768x518

Z <meta name="viewport" content="height=device-height">:

• Portret: 980x1024
• Krajobraz: 980x1024

Z <meta name="viewport" content="height=device-height,width=device-width">:

• Portret: 768x1024
• Krajobraz: 768x1024

Z <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width,height=device-height">

• Portret: 768x1024
• Pozioma: 1024x1024

Z <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,height=device-height">

• Portret: 831x1024
• Krajobraz: 1520x1024

Nie ma prostej odpowiedzi na to pytanie. Mobilna wersja WebKit firmy Apple, używana w iPhone'ach, iPodach Touch i iPadach, przeskaluje stronę, aby dopasować ją do ekranu, po czym użytkownik może dowolnie powiększać i pomniejszać.

To powiedziawszy, możesz zaprojektować swoją stronę tak, aby zminimalizować wymagane powiększenie. Najlepiej jest, aby szerokość i wysokość były takie same, jak w przypadku niższej rozdzielczości iPada, ponieważ nie wiesz, w którą stronę jest ustawiony; innymi słowy, nadałbyś stronie 768x768 tak, aby dobrze pasowała do ekranu iPada, niezależnie od tego, czy jest zorientowany na 1024x768, czy 768x1024.

Co ważniejsze, chciałbyś zaprojektować swoją stronę z dużymi kontrolkami z dużą ilością miejsca, które można łatwo uderzyć kciukami - możesz łatwo zaprojektować stronę 768x768, która była bardzo zagracona i dlatego wymagała dużego powiększenia. Aby to osiągnąć, prawdopodobnie będziesz chciał podzielić swoje kontrolki na kilka stron internetowych.

Z drugiej strony nie jest to najbardziej opłacalna pogoń. Jeśli podczas projektowania znajdziesz możliwości, aby uczynić swoją stronę bardziej „przyjazną dla palców”, zrób to ... ale rzeczywistość jest taka, że ​​użytkownicy iPadów bardzo dobrze sobie radzą z poruszaniem się oraz powiększaniem i pomniejszaniem strony, aby dostać się do rzeczy, ponieważ jest to konieczne w większości witryn internetowych. Jeśli już, to prawdopodobnie chcesz go tak zaprojektować, aby sprzyjał tego typu nawigacji.

Twórz pola z odpowiednimi zgrupowanymi danymi, które można łatwo kliknąć dwukrotnie, aby się na nich skupić, i trzymaj powiązane kontrolki blisko siebie. Użytkownicy iPadów najprawdopodobniej docenią stronę, która ułatwia znajomą nawigację z powiększaniem i przesuwaniem, do której są przyzwyczajeni, niż stronę, która ma mniej elementów sterujących, więc nie muszą.

Możesz spróbować tego:

    /*iPad landscape oriented styles */

    @media only screen and (device-width:768px)and (orientation:landscape){
        .yourstyle{

        }

    }

    /*iPad Portrait oriented styles */

    @media only screen and (device-width:768px)and (orientation:portrait){
        .yourstyle{

        }
    }