Thiết kế đáp ứng: Cho phép người dùng cũng xem toàn bộ trang web

Question

Khi sử dụng thiết kế đáp ứng, có cách nào vẫn cho phép người dùng xem toàn bộ trang web không?

Ví dụ: Họ đang xem trên iPhone nhưng muốn xem toàn bộ trang web. Họ nhấp vào liên kết "Trang web đầy đủ" và hiển thị cho họ phiên bản 1024px.

Answer 1

Nếu bạn đang sử dụng truy vấn phương tiện, chỉ áp dụng quy tắc bên dưới phần tử nội dung có lớp 'đáp ứng'.

@media screen and (max-width: 320px) { 
    body.responsive { 
    color: blue; 
    } 
} 

Nếu người dùng không muốn xem bố cục đáp ứng, chỉ cần xóa lớp 'đáp ứng' khỏi phần tử nội dung, hủy bỏ tất cả các quy tắc. Bạn có thể duy trì tùy chọn người dùng theo cookie hoặc một số phương pháp khác.

Demo: http://jsbin.com/obaquq/edit#javascript,html

Giảm cửa sổ để không quá 500px sẽ biến các văn bản trắng, và màu xanh nền. Điều này là có điều kiện trên cơ thể có lớp 'đáp ứng'. Nhấp vào đoạn đầu tiên sẽ chuyển đổi lớp này, và do đó chuyển đổi các hiệu ứng của chính truy vấn phương tiện đó.

Answer 2

Chưa thử điều này, nhưng tự mình nghĩ về vấn đề này. Tôi tưởng tượng bạn có thể sử dụng trình chuyển đổi biểu định kiểu để tắt biểu định kiểu phản hồi chính, để người dùng có phiên bản đầy đủ

Bản định kiểu chuyển đổi chắc chắn không phải là một khái niệm mới. Đây là bài viết cho ALA vào khoảng năm 2001 giải quyết các bảng định kiểu chuyển đổi: http://www.alistapart.com/articles/alternate/

Answer 3

Tôi đã tự hỏi về điều này. Tôi đã thành công bằng cách sử dụng jQuery để sửa đổi thẻ viewport, dường như làm việc khá tốt từ những gì tôi có thể nói cho đến nay. Không yêu cầu nhiều bảng định kiểu hoặc nhiều CSS phụ.

http://creativeandcode.com/responsive-view-full-site/