Jak wyłączyć wyłączanie zawartości MobileSafari podczas zmiany orientacji?

Robię mobilną wersję mojej strony wsparcia aplikacyjnego i mam trochę WebKit/iOS/HTML/CSS problemu tutaj ...Jak wyłączyć wyłączanie zawartości MobileSafari podczas zmiany orientacji?

Mam stronę, index.php z mobile.css załączonym pliku. W moim <head> tagu mam:

<meta name="viewport" content="width=device-width, user-scalable=no, max-scale=1.0" />

Moi body „s css:

body { 
    font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue","Helvetica","Lucida Grande",Verdana,Arial,sans-serif; 
    margin: 0; 
    background: url(../../images/textured_bg.png) repeat; 
    color:#454545; 
    font-size: 14px; 
    text-shadow: rgba(255, 255, 255, 0.5) 0 1px; 
    width:100%; 
}

Wszystko działa poprawnie w orientacji pionowej, ale kiedy obrócić mój iPhone do krajobrazu, Safari skaluje moje treści tak to wygląda jak w układzie pionowym, ale trochę większy:

enter image description here

Moje pytanie: Czy istnieje sposób, bez making custom css for each orientation, aby zmusić Safari do skalowania moich treści?

Źródło

2011-08-18 akashivskyy

Nie mam iPhone'a, ale czy to normalne zachowanie dla telefonu? Czy użytkownik spodziewał się przeskalowania zawartości po zmianie orientacji? – Jrod

Może, ale nie chcę, aby moje treści były skalowane, ponieważ moje obrazy są pikselowane. PS: niektóre witryny nie skalują swoich treści, np. StackOverflow: http://cl.ly/0o0t2N2225063T2N2E05 – akashivskyy

Jeśli problemem jest piksele obrazów, możesz zamiast tego użyć opcji svg. – Ludder

Prawdopodobnie będziesz chciał użyć znacznika <meta name="viewport" .../> (patrz MDN docs i Safari Web Content Guide). Mobilny układ Stos Exchange używa to:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" />

Źródło

2011-08-18 20:02:12 jtbandes

Użyłem przecinków (',') zamiast średników (';') ... Wstyd mi ... – akashivskyy

MDN mówi przecinkami, Apple mówi średnikami. Wygląda na to, że oba mogą używać średników. –

Kluczowym elementem do mocowania to nie jest meta tag rzutni (choć to ważne też, ale z różnych powodów). Oto magia, która naprawia rozmiar tekstu przy zmianie orientacji.

html { 
    -webkit-text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%; 
}

(. Mam to od telefonu w pliku CSS Stack Exchange Network)

Źródło

2011-09-01 17:11:05

Myślę, że to najlepsza odpowiedź. Wyłączenie skalowania użytkownika nie jest bardzo przyjazne dla użytkownika. Więcej informacji można znaleźć na stronie http://www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ –

Nie działa, jeśli tekst jest skupiony, gdy uruchamiana jest 'onorientationchange'. Zobacz [wersja demo] (https://idorecall.com/static/bug-demos/mobile-safari-content-scaling-on-rotation-in-input/). –

Próbowałem przecinki, nie działa - wtedy próbował średników, że zadziałało. iPod touch, iOS 4.2

Źródło

2012-03-27 21:58:39 tim

Jak wyłączyć wyłączanie zawartości MobileSafari podczas zmiany orientacji?

Odpowiedz

Powiązane problemy