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?
Trả lời
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:
- 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.
- 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.
- 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 đó.
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
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
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
Để 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
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
Dùng thử Bootstrap. Tôi có cần nói thêm không?
Xin vui lòng, hãy nói nhiều hơn. Có thể đưa ra một số ví dụ sử dụng, v.v. –
- 1. Làm cách nào để kiểm tra thiết kế trang web trên thiết bị di động?
- 2. Trang web lập trình dành cho thiết bị di động
- 3. Java Servlets - Làm cách nào để phát hiện xem người dùng có đến từ thiết bị di động không?
- 4. Thiết bị di động được phát hiện là thiết bị không di động
- 5. Các trang cơ bản về HTML dành cho thiết bị di động
- 6. Làm cách nào để tự động định lại kích thước hình ảnh cho trang web trên điện thoại di động?
- 7. hộp tổ hợp mở tự động trên trình duyệt di động cho các thiết bị Android
- 8. Tạo nút "Lưu làm dấu trang" trong ứng dụng web dành cho thiết bị di động
- 9. Thêm liên hệ vào thiết bị di động Sổ địa chỉ từ một trang web HTML
- 10. Làm cách nào để điều hướng thu gọn vào biểu tượng nhỏ cho thiết bị di động?
- 11. Chiều cao trang trên thiết bị di động jQuery
- 12. Cách cuộn trên "Google Maps dành cho thiết bị di động" hoạt động như thế nào?
- 13. Cách tốt nhất để xác định xem trang web dành cho thiết bị di động là gì?
- 14. Bàn phím số cho thiết bị di động
- 15. Tự động điền cho các ứng dụng web dành cho thiết bị di động
- 16. Thư viện biểu đồ web dành cho thiết bị di động, nghiên cứu của chúng tôi
- 17. Chuyển hướng thiết bị di động đến phiên bản thay thế của trang web của tôi
- 18. Tôi làm cách nào để cải thiện Tự động hóa giao diện người dùng iPhone?
- 19. Video "streaming" cho thiết bị di động với Amazon CloudFront
- 20. Javascript profiling trên thiết bị di động
- 21. Làm cách nào để thiết kế trang web cho điện thoại di động
- 22. Đại lý người dùng di động regexp
- 23. Tôi có thể nhận ID thiết bị Android thông qua trang web trên thiết bị di động không?
- 24. SEO trang web dành cho thiết bị di động - Chơi độc đáo với Google
- 25. Đề xuất giao diện người dùng trên thiết bị di động Windows
- 26. Cách đúng để sử dụng điện thoại di động và điện thoại di động với nhiều trang html
- 27. Cách dễ nhất để xác định xem người dùng có đang sử dụng thiết bị di động hay không
- 28. Tắt di chuyển trên thiết bị di động
- 29. Google Map trong thiết bị di động
- 30. Tự động thiết lập người dùng jenkins với CLI
thể trùng lặp của [hướng dẫn bố trí Responsive?] (Http://stackoverflow.com/questions/10061572/responsive-layout-tutorial) –