Tại sao các tiêu đề HTTP không bao gồm độ phân giải thiết bị, mật độ pixel, v.v.?

Tôi hiện đang phát triển một trang web đáp ứng với các truy vấn phương tiện CSS. Sẽ dễ dàng hơn nhiều nếu máy chủ trả về một HTML / CSS khác nhau cho mỗi chế độ xem.
Tôi đã tự hỏi tại sao khách hàng không thể bao gồm thông tin khung nhìn của nó khi yêu cầu tệp HTML. Hành vi này đã phổ biến để trả lại các trang web bằng ngôn ngữ chính xác bằng cách sử dụng Accept-Languagetiêu đề.

Nói tóm lại, đó không phải là cách Wild Wild Web được thiết kế để hoạt động.

Thiết kế ban đầu chỉ đơn giản là HTML đã cho trình duyệt gợi ý về tài liệu. Những bit nào cần nhấn mạnh, đi đâu để lấy tập tin hình ảnh. Các quyết định về phông chữ (cũng như kích thước) là công việc của trình duyệt và cài đặt cấu hình cục bộ.

Vâng, tôi biết thế giới đã chuyển sang và bây giờ các nhà thiết kế web mong muốn kiểm soát mọi pixel mà mắt chúng ta có thể nhìn thấy. Trong quá khứ đã qua, đó là công việc của chủ đề máy tính để làm điều đó.

Tôi nghĩ bạn chưa hoàn toàn có ý tưởng về Thiết kế Web đáp ứng . Việc phục vụ HTML / CSS / JS khác nhau dựa trên trình duyệt web của khách hàng đã có một thời gian và tôi khá chắc chắn rằng vẫn còn một số trang web vẫn đang làm điều đó - một ví dụ rất rõ ràng là cách phục vụ di động của trường học cũ chủ đề thân thiện cho một trang web.

Theo tôi, điều bạn thiếu là trong kịch bản của bạn nếu người dùng thay đổi cổng xem từ dọc sang ngang, thì bạn sẽ không nhận được bất kỳ câu trả lời phản hồi nào, trừ khi bạn làm mới trang. Hành động tương tự được yêu cầu nếu bạn thay đổi kích thước cửa sổ trình duyệt web hoặc thay đổi mức thu phóng mặc định. Ngoài ra một yếu tố trong một trang cũng có thể đáp ứng với các yếu tố khác. Vì vậy, nếu bạn ẩn thanh bên bên phải, ví dụ, nội dung chính sẽ đáp ứng với thay đổi. Chúng sẽ không thể thực hiện theo cách của bạn, một lần nữa, trừ khi bạn làm mới trang.

Ngoài ra các yêu cầu HTTP không chỉ được thiết kế để phục vụ toàn bộ trang web. Trong nhiều trường hợp bạn đang gửi yêu cầu để gửi / nhận dữ liệu đơn giản, tập tin, hình ảnh, vv mà họ không cần phải mang theo trên những thông tin meta xem cảng và các chi phí trong một quy mô như Internet sẽ có rất nhiều Tôi đoán .

Bạn có chắc là bạn đang làm thiết kế đáp ứng? Thiết kế đáp ứng về mặt kỹ thuật là sự kết hợp giữa thiết kế chất lỏng và truy vấn phương tiện.

Thiết kế trôi chảy giải quyết 90% vấn đề về khung nhìn cho bạn, nếu bạn thông minh về cách bạn sắp xếp mọi thứ. Truy vấn phương tiện giúp bạn nhận được 10% khác bằng cách thay đổi các đặc điểm lưới dựa trên kích thước hiện tại.

Nếu bạn đang cố gắng chỉ thực hiện chất lỏng (tỷ lệ phần trăm ở mọi nơi, kích thước tương đối trên mọi thứ, không có gì được chỉ định bằng pixel, v.v.), bạn sẽ gặp phải vấn đề phải làm gì khi chế độ xem có kích thước khác nhau (như chế độ xem ngang của màn hình nền so với một chế độ xem chân dung di động). Một số thứ chỉ đơn giản là không phù hợp khi bạn đi từ 2048px đến 640px. Khi bạn cố gắng chỉ thực hiện các truy vấn phương tiện, bạn sẽ kết thúc với hàng chục và hàng chục lần ngắt truy vấn phương tiện và về cơ bản bạn đang điều khiển các lớp CSS của mình trong trường hợp đó. Cả hai cách tiếp cận đều không phù hợp với RWD - bạn phải kết hợp cả hai để có được mọi thứ.

Lời khuyên của tôi: tạo ba hoặc bốn "độ phân giải và định hướng danh nghĩa" khác nhau - như Phong cảnh máy tính để bàn, dọc và ngang iPad, dọc và ngang iPhone - và coi chúng như các khung lưới của bạn để làm việc. Sau đó thiết lập truy vấn phương tiện của bạn cho những giờ nghỉ. Sau đó, làm việc thật chăm chỉ để bám vào vài lần nghỉ đó, sử dụng bố cục chất lỏng để hoàn thành nó - rất có thể với một lưới CSS nào đó (có hàng tá trong số chúng được dựng sẵn cho bạn hoặc bạn có thể tự cuộn).

Nếu bạn có một trang web động tìm nạp nội dung, một mã như thế này sẽ thực hiện thủ thuật (trong ES6):

var headers = new Headers();
    headers.set('window-w', window.innerWidth);  // or $('html').width()  with jQuery
    headers.set('window-h', window.innerHeight); // or $('html').height() with jQuery
fetch(url, {'credentials': 'include', 'headers': headers})
.then(function(response) {
    ...

Lưu ý: 'thông tin đăng nhập' dành cho cookie phiên

Sau đó, bạn có thể đọc các tiêu đề phía máy chủ với ví dụ (trong PHP):

$headers = getallheaders();
if (isset($headers['window-w']) and isset($headers['window-h'])) {
    $window_w = 1 * $headers['window-w'];
    $window_h = 1 * $headers['window-h'];
    if ($window_w * $window_h > 0) {
        ...

Điều này sẽ không hoạt động vì lý do đơn giản là người dùng có thể thay đổi kích thước cửa sổ trình duyệt mà không cần tải lại trang.

Thiết kế đáp ứng có nghĩa là bố cục thay đổi linh hoạt để đáp ứng với các kích thước khung nhìn khác nhau và các yếu tố khác. Vì vậy, nếu thiết kế được cố định ở phía máy chủ dựa trên kích thước khung nhìn tại thời điểm yêu cầu, nó sẽ không phản hồi nếu cửa sổ được thay đổi kích thước bởi người dùng. Đây là lý do tại sao các truy vấn phương tiện được đánh giá ở phía khách hàng.