2011-08-16 22 views
6

Khi bạn truy cập một trang web trên điện thoại của mình (Tôi đang sử dụng Android) nếu trang thông thường của nó, nó co lại để vừa với màn hình điện thoại của bạn.Làm cách nào để một trang web di động không co lại?

Tôi luôn giả định cách tạo trang di động là làm cho trang đủ nhỏ để vừa với độ phân giải màn hình của điện thoại mà không bị thu hẹp.

Điều này không xảy ra. Tôi thậm chí còn đặc biệt thiết lập kích thước trang của tôi thành body{ width: 300px;}, vẫn còn khi tôi tải nó trong điện thoại của tôi nó được thu nhỏ ở góc trên cùng bên trái với nhiều không gian trống xung quanh nó.

Tôi đang làm gì sai?

+0

Tôi đã trả lời câu hỏi này trước: http://stackoverflow.com/questions/2977550/iphone-safari- css-rotation-bug/3188736 # 3188736 –

Trả lời

9

Bạn cần phải sử dụng thẻ meta viewport

<!doctype html> 
<html> 
<head> 
    <title>Hello world!</title> 

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

<body> 

<p>Hello world!</p> 

</body> 
</html> 

đọc chi tiết ở đây http://davidbcalhoun.com/2010/viewport-metatag

+0

Cảm ơn bạn đã sửa nó! :) –

+0

Câu trả lời hay, nhưng điều đó vẫn không hiển thị các trang web ở kích thước thực của chúng. 1 pixel trên trang web thực sự là 1,5 pixel trên màn hình thiết bị di động. – trusktr

0

Điều này là do chiều rộng của cơ thể có liên quan đến thiết bị duyệt.

Hầu hết các điện thoại hiện đại đều mô phỏng trình duyệt trên máy tính để bàn và do đó chiều rộng 300px là 300px so với cửa sổ trình duyệt tổng thể. Về cơ bản, bạn sẽ thấy như vậy trong trình duyệt trên máy tính để bàn của mình giống như trong trình duyệt trên điện thoại của bạn.

Lý tưởng nhất là điều cần làm là hiển thị nội dung hơi khác với người dùng thiết bị di động. Thông thường, một phiên bản cắt giảm của trang có các mục menu lớn hơn và ẩn nhiều nội dung thông thường không cần thiết. (tiêu đề ưa thích, v.v.)

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