Làm cách nào để vô hiệu hóa nội dung của MobileSafari trong việc thay đổi định hướng?

Tôi đang thực hiện một phiên bản di động của trang web hỗ trợ ứng dụng của tôi và tôi có một chút vấn đề WebKit/iOS/HTML/CSS ở đây ...Làm cách nào để vô hiệu hóa nội dung của MobileSafari trong việc thay đổi định hướng?

Tôi đã một trang, index.php, với mobile.css file đính kèm. Trong thẻ <head> của tôi, tôi có:

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

body của tôi '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%; 
}

Tất cả mọi thứ hoạt động tốt theo hướng dọc, nhưng khi tôi xoay iPhone của tôi để cảnh quan, Safari quy mô nội dung của tôi như vậy có vẻ như trong bức chân dung, nhưng lớn hơn một chút:

enter image description here

câu hỏi của tôi: có cách nào mà không cần making custom css for each orientation, để buộc Safari không mở rộng nội dung của tôi?

Nguồn

2011-08-18 akashivskyy

Tôi không có bản thân iphone, nhưng đây có phải là hành vi bình thường đối với điện thoại không? Người dùng có thể mong đợi nội dung được thu nhỏ khi chuyển hướng không? – Jrod

Có thể, nhưng tôi không muốn nội dung của mình được chia tỷ lệ, vì hình ảnh của tôi bị pixelated. Tái bút: Có một số trang web không mở rộng nội dung của chúng, ví dụ: StackOverflow: http://cl.ly/0o0t2N2225063T2N2E05 – akashivskyy

Nếu hình ảnh pixelated là vấn đề, bạn có thể xem xét sử dụng svg thay thế. – Ludder

Có thể bạn sẽ muốn sử dụng thẻ <meta name="viewport" .../> (xem MDN docs và Safari Web Content Guide). Bố cục Stack Exchange trên thiết bị di động sử dụng điều này:

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

Nguồn

2011-08-18 20:02:12 jtbandes

Tôi đã sử dụng dấu phẩy (',') thay vì dấu chấm phẩy (';') ... Xấu hổ với tôi ... – akashivskyy

MDN nói sử dụng dấu phẩy, Apple nói dấu chấm phẩy. Có vẻ như cả hai đều có thể sử dụng dấu chấm phẩy. –

Phần quan trọng để sửa lỗi này không phải là thẻ meta viewport (mặc dù điều đó cũng quan trọng, nhưng vì các lý do khác nhau). Đây là phép thuật sửa kích thước văn bản khi thay đổi hướng.

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

(. Tôi nhận này từ tập tin CSS di động StackExchange của)

Nguồn

2011-09-01 17:11:05

Tôi nghĩ đây là câu trả lời hay nhất. Vô hiệu hóa quy mô người dùng không thân thiện với người dùng. Để biết thêm thông tin, hãy xem http://www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ –

Điều này không hoạt động nếu đầu vào văn bản được tập trung trong khi 'onorientationchange' kích hoạt. Xem [demo here] (https://idorecall.com/static/bug-demos/mobile-safari-content-scaling-on-rotation-in-input/). –

tôi đã cố gắng dấu phẩy, không làm việc - sau đó đã cố gắng dấu chấm phẩy, mà DID làm việc. iPod touch, iOS 4.2

Nguồn

2012-03-27 21:58:39 tim

Làm cách nào để vô hiệu hóa nội dung của MobileSafari trong việc thay đổi định hướng?

Trả lời

Các vấn đề liên quan