Cài đặt mức thu phóng trên trình duyệt di động

Question

Tôi đang thiết kế trang web để truy cập trên thiết bị di động và tôi muốn đặt kích thước trang, chiều cao và kích thước nút, vì vậy chúng hiển thị làm đầy màn hình. Ví dụ: nếu người dùng đang sử dụng HTC HD, toàn bộ màn hình sẽ là 480x800 với nút có kích thước 240x200. Tuy nhiên, IE di động cũng như Opera tải trang với một số mức thu phóng, do đó các nút hiển thị quá lớn hoặc quá nhỏ. Làm thế nào tôi có thể đọc mức độ phóng hiện tại trong javascript hoặc đặt nó từ javascript?

Answer 1

Bạn không nên dựa vào việc sử dụng JavaScript trên thiết bị di động vì nó vẫn không được hỗ trợ rộng rãi trên tất cả các điện thoại. Thay vào đó, bạn nên đặt chiều rộng của trang giống với chiều rộng của trình duyệt để các trang của bạn xuất hiện ở mức 100%, ví dụ: body {width: 100%; margin: 0; padding: 0;}

Đối với các nút, bạn nên sử dụng các giá trị tương đối hoặc sử dụng các kích thước hình ảnh khác nhau nếu bạn có thể phát hiện chiều rộng của trình duyệt trước khi tải trang.

Answer 2

Hãy xem xét <meta name="viewport">. Nó được hỗ trợ trên nhiều nền tảng di động, bao gồm (AFAIK) iPhone, Android, Blackberry, Opera Mobile và thậm chí cả IE6 Mobile. Về cơ bản, nó cho phép bạn cài đặt trước chiều rộng thiết bị, mức thu phóng và zoom tối đa/phút. Hãy xem Apple developer site và để biết thêm thông tin.

Ngoài ra, bạn có thể sử dụng truy vấn phương tiện CSS để phát hiện hình dạng và kích thước của trình duyệt và phân phối các bố cục khác nhau (v.v) cho phù hợp. Một lần nữa, chúng được hỗ trợ khá rộng rãi và Apple developer site có thêm thông tin.