2012-06-20 18 views
5

Có cách nào đơn giản để làm cho trang HTML tự động điều chỉnh cho người dùng điện thoại di động không? Trang của tôi: http://www.xiexianhui.com/baxjoomla15/index0.html dường như không vừa với điện thoại Sony xperia ray của tôi.Tôi làm cách nào để trang HTML tự động điều chỉnh cho người dùng thiết bị di động?

+1

thể trùng lặp của [hướng dẫn bố trí Responsive?] (Http://stackoverflow.com/questions/10061572/responsive-layout-tutorial) –

Trả lời

13

Trước tiên, bạn nên xem các khái niệm về Responsive Web Design. Có quá nhiều và câu hỏi này quá chung chung để trả lời mọi thứ. Nhưng tóm lại, nó yêu cầu 3 thành phần:

  1. Truy vấn phương tiện, để cung cấp các kiểu css khác nhau cho các kích thước màn hình khác nhau.
  2. Lưới css chất lỏng, do đó bố cục của trang web sẽ tự động điều chỉnh theo kích thước của màn hình.
  3. Hình ảnh linh hoạt, vì vậy, tất cả các hình ảnh đều co giãn một cách trôi chảy để chúng không chồng chéo lên vùng chứa nội dung.

Nếu bạn chỉ muốn trang web của bạn hiển thị đầy đủ trên màn hình của điện thoại, bạn sẽ phải sử dụng viewport meta tag. Đặt số này vào trong <head> của trang của bạn:

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

và trang của bạn sẽ hoàn toàn phù hợp với màn hình. Nhưng bạn sẽ nhận thấy bây giờ tất cả mọi thứ là đặc biệt nhỏ và không sử dụng được. Thiết kế web đáp ứng là giải pháp cho điều đó.

+0

Hmmm, xin lỗi cho câu hỏi rằng có vẻ ngây thơ cho bạn. Tôi đã thêm thông tin meta như bạn đã hướng dẫn và tải tệp mới lên máy chủ, liên kết http://www.xiexianhui.com/baxjoomla15/index0.html vẫn không hoạt động đối với ô của tôi, nó có hoạt động cho ô của bạn hay không ipad? Cảm ơn. – mdivk

+0

Bạn đang sử dụng bố cục dựa trên 'bảng'. Hầu như không có gì xáo trộn trong câu trả lời của tôi hoặc của người khác sẽ làm việc với điều đó. Cộng đồng thiết kế web đã ngừng sử dụng bố cục dựa trên 'bảng' và hoàn toàn cam kết bố cục dựa trên css ở đâu đó vào khoảng năm 2003/2004, tùy thuộc vào cách bạn nhìn vào nó. Và, cạnh nhau, bạn đang định vị vùng chứa #content chính của mình là tuyệt đối. Điều này cũng làm cho tất cả các đề xuất trong chủ đề này không hoạt động – kremalicious

+0

Cảm ơn bạn vì điều này, tôi không giỏi ở dạng html, bạn có thể cho tôi biết thêm về cách tạo trang này không? Tất cả những gì tôi cần là làm cho trang xếp kề như gạch WIN 8, vì nó trông giống như một bảng, tôi đã tạo một bảng để giả lập nó. Nó sẽ được đánh giá cao nếu bạn có thể tạo một trang mẫu cho tôi. Cảm ơn bạn trước. – mdivk

0

Để xem lại những gì đã được nói: WURFL, http://wurfl.sourceforge.net/, Wireless Universal Resource FiLe, là kho lưu trữ mô tả thiết bị (DDR), tức là thành phần phần mềm ánh xạ tiêu đề yêu cầu HTTP đến cấu hình của máy khách HTTP (Máy tính để bàn, Thiết bị di động, Máy tính bảng, v.v.) đã đưa ra yêu cầu.

Một lối tắt: Chuẩn bị 3 bố cục khác nhau sẽ bao gồm điện thoại cũ cơ bản, điện thoại đầy màu sắc mới và các tính năng cao cấp của điện thoại và PDA. Đây là một nhiệm vụ khá đơn giản và đồng thời cung cấp kết quả tuyệt vời. Tôi cũng sẽ cung cấp cho liên kết này một cái nhìn. http://mobiforge.com/developing/story/introduction-wurfl

+0

Cảm ơn bạn, tôi sẽ xem xét sau này, nó dường như không phải là một công việc 5 phút với tôi mặc dù. – mdivk

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