Làm cách nào để trang web của tôi được thu nhỏ theo mặc định trên điện thoại di động?

Question

Vì vậy, tôi muốn người dùng có thể nhìn thấy nền của tôi trên trang web của tôi. Chiều rộng trang web hiện tại của tôi là và khi bạn xem trang web trong trình duyệt dành cho thiết bị di động (ví dụ: iPhone, Opera Mini), nó được phóng to trên văn bản và người dùng không thể nhìn thấy nền.

Tôi đã thử sử dụng thẻ meta viewport không thành công. Làm cách nào để trang web của tôi được thu nhỏ theo mặc định trên trình duyệt trên điện thoại di động?

EDIT:

Đây là mã tôi đã cố gắng cho đến nay:

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

Answer 1

Tôi biết đây là câu hỏi cũ nhưng tôi vẫn trả lời trong trường hợp người khác cần câu trả lời.

Tính đến tháng 9 năm 2011, Opera Mini vẫn đang sử dụng phiên bản 2.5 của công cụ hiển thị Presto. Chế độ xem không khả dụng trong Opera cho đến Presto 2.7. (Opera Mobile, chúng tôi trình duyệt điện thoại thông minh không hỗ trợ khung nhìn.)

Hãy thử điều này:

<meta name="viewport" content="initial-scale=0.25"> 

Khi bạn đưa width=device-width, trình duyệt 'kỳ diệu' ** thấy khu vực nội dung và điều chỉnh nó để điền chiều rộng của thiết bị. Nếu bạn muốn nền xem qua, bạn sẽ cần thu nhỏ toàn bộ trang để vừa với khung nhìn.

Rời khỏi <meta name=viewport> hoàn toàn cũng sẽ hoạt động, nhưng bạn thường sẽ thấy ít ảnh nền hơn.

Lý tưởng nhất, tuy nhiên, bạn cũng nên sử dụng truy vấn phương tiện để tạo trang web hoạt động ở nhiều độ rộng khác nhau.

** Sử dụng chẩn đoán của một số loại mà nhà phát triển trình duyệt có thể giải thích tốt hơn tôi có thể.

Answer 2

Tôi ngạc nhiên meta viewport không làm việc cho bạn (trên Mobile Safari). Bạn có thể đăng những gì bạn đã sử dụng không?

CẬP NHẬT: Điều này thường làm việc cho tôi ... hãy thử xem:

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

Nếu mà làm việc, sau đó bạn có thể bắt đầu chơi với các giá trị quy mô lớn để cho phép người dùng phóng to nếu họ muốn đến, và bao nhiêu.

Answer 3

Sau nhiều lần dùng thử và lỗi, tôi nhận được những điều sau đây để hoạt động chính xác trên iPhone 5.0.1 và Android 2.3.6. Trang web được thiết kế với chiều rộng 480. Tùy thuộc vào chiều rộng của trang web của bạn, bạn phải chơi xung quanh với giá trị chiều rộng cho iPhone.

<meta name="viewport" content="width=520, target-densitydpi=high-dpi" /> 
<meta http-equiv="Content-Type" content="application/vnd.wap.xhtml+xml; charset=utf-8" /> 
<meta name="HandheldFriendly" content="true" /> 
<meta name="apple-mobile-web-app-capable" content="yes" />