Trang web Responsive thu nhỏ toàn bộ chiều rộng trên thiết bị di động

Tôi đang thử nghiệm thanh điều hướng phản hồi Bootstrap và tôi có một trang web demo . Khi tôi thay đổi kích thước trình duyệt trên máy tính để bàn, tất cả đều hoạt động tốt, bao gồm thanh điều hướng trở thành menu có thể thu gọn với một biểu tượng nhỏ ở trên cùng mà tôi có thể nhấp để xem thêm các nút menu.

Nhưng khi tôi thử nó từ một trình duyệt di động (tôi đã thử nó trên chrome và trình duyệt internet trên Android), tôi không thấy thiết kế đáp ứng. Tôi chỉ có thể thấy phiên bản rất nhỏ của máy tính để bàn như trang web.

Bất cứ ai có thể chỉ ra những gì tôi đang làm sai?

Thêm phần này vào đầu HTML của bạn ..

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Điều này cho các trình duyệt thiết bị nhỏ hơn làm thế nào để chia tỷ lệ trang. Bạn có thể đọc thêm về điều này tại đây: https://developer.apple.com/l Library / content / document / AppleAppluggest/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

như được đề xuất ở đây http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

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

sẽ là một lựa chọn thậm chí tốt hơn vì nó giúp chuyển từ chân dung sang phong cảnh và trở lại trải nghiệm người dùng dễ chịu hơn nhiều vì với / chiều cao sẽ được áp dụng một cách tự nhiên vì khả năng tự động mở rộng.

Thêm điều này cho những người tìm kiếm lỗi này cho người mà câu trả lời được chấp nhận không hoạt động. Tôi tin rằng đây sẽ là một trường hợp hiếm hơn, nhưng dù sao cũng bực bội:

Nếu trang của bạn được hiển thị bên trong bộ khung (ví dụ: che giấu tên miền), thì việc đặt các thẻ meta sẽ không có ích. Bạn sẽ cần đặt chúng vào trang trên miền che giấu mà bạn có thể có hoặc không có quyền truy cập tùy thuộc vào máy chủ DNS của mình.

Hãy thử xóa bộ nhớ cache của trình duyệt của bạn và mở trang trong một tab mới. Điều này đôi khi giải quyết vấn đề cho tôi bất cứ khi nào nó xảy ra.