为什么HTTP标头不包含设备分辨率，像素密度等？

10

我目前正在使用CSS媒体查询开发一个响应式网站。如果服务器为每个视口返回不同的HTML / CSS，将会更加容易。
我想知道为什么客户端在请求HTML文件时不能包含其视口信息。使用Accept-Language标头以正确的语言返回网站时，这种行为已经很普遍。

http

— eli
source

您可以通过JavaScript发送它，然后再加载CSS文件。我认为问题是，分辨率可以改变...

— Knerd 2014年

那不是RWD。除非刷新页面，否则这些HTML / CSS不会给您任何响应效果。

— Mahdi 2014年

分辨率，字体样式，字体大小，浏览器类型，屏幕大小，这些在设备之间都是可变的，您在问一个Web 1.0类型的问题，要么转到诸如ASP，PHP，添加Javascript之类的动态对象，要么对html给您的媒体选择器感到满意。

— Jeff Langemeier 2014年

1

如果根本没有任何图像显示功能的软件要求您的HTML而不是浏览器怎么办？如屏幕阅读器？还是基于终端的浏览器？

— 杰克

18

简而言之，Wild Wild Web并不是这样设计的。

最初的设计只是HTML向浏览器提供有关文档的提示。要强调的位，在哪里获取图像文件。有关字体（以及大小）的决定是浏览器和本地配置设置的工作。

是的，我知道世界已经发生了变化，现在网页设计师希望控制我们眼睛看到的每个像素。在过去，这是桌面主题的工作。

— 邵逸夫
source

3

我要说的是，即使在今天，也应该是设备的工作。设置几个不同的最小CSS集，然后让设备从那里进行处理。

— Jeff Langemeier 2014年

@JeffLangemeier完全同意。即使这个答案从本质上来说是正确的，但是它根本不是在谈论RWD。

— Mahdi 2014年

1

也许是时候重新设计一种将内容与设计完全分开的新Web格式了：）

— eliocs 2014年

@Mahdi我真的不觉得这个问题本质上是关于RWD的，它是一个试图重新发明轮子的人，并且想知道为什么HTML规范没有<任意的个人需求>。

— Jeff Langemeier 2014年

@eliocs存在，它被称为html和CSS。HTML是结构，而CSS是设计。或者，如果您希望从设计中完全分离内容，请转到动态系统，例如PHP，Python中的django等...

— Jeff Langemeier 2014年

8

我认为您还没有完全理解响应式Web设计的想法。基于客户端的网络浏览器提供不同的HTML / CSS / JS服务已经有一段时间了，我敢肯定，仍有一些网站仍在这样做-一个很明显的例子是老式的移动服务提供方式网站的友好主题。

我认为您所缺少的是，在这种情况下，如果用户将视口从纵向更改为横向，那么除非刷新页面，否则您将不会得到任何响应。如果您调整Web浏览器窗口的大小或更改默认缩放比例，则需要执行相同的操作。页面中的元素也可以响应其他元素。因此，例如，如果隐藏右侧的侧栏，则主要内容将响应更改。同样，除非您刷新页面，否则将无法以您的方式进行操作。

同样，HTTP请求不仅用于服务器整个网页。在许多情况下，您发送的请求是发送/接收纯数据，文件，图像等，它们不需要进行视口元信息，而我想，像Internet这样的规模的开销会很多。

— 马赫迪
source

该开销会提供图片太有用，想象你的移动设备返回较小分辨率的图片。我同意页面加载后视口更改是我考虑的重大缺陷。

— eliocs 2014年

@eliocs是的，对于图像而言，这实际上是重要的。感谢您的更正。

— Mahdi 2014年

我认为这不是响应式设计试图解决的直接问题。在大多数情况下，这样做的目的是确保提供第一次渲染所需的最少资源。您仍将在此之上提供响应式设计。在请求中包含信息并不禁止响应式设计。例如，您可能使用HTTP2在第一个响应中为srcset获取正确的图像。除非您拥有视口大小信息，否则您将无法执行此操作，但是您仍然可以使用srcset来保持响应状态。

— monokrome

2

您确定要进行响应式设计吗？从技术上讲，响应式设计是流体设计和媒体查询的结合。

如果您对布局方式很聪明，流体设计可以为您解决90％的视口问题。媒体查询可根据当前尺寸更改网格特征，从而使您获得另外10％的收益。

如果您尝试做的只是流畅的操作（到处都是百分比，所有内容的相对大小，没有以像素为单位指定的内容，等等），那么您就会遇到视口尺寸明显不同（例如桌面风景视图与移动肖像）。当您从2048px变为640px时，有些东西根本不合适。当您尝试仅执行媒体查询时，最终会导致数十次媒体查询中断，并且在这种情况下，您基本上是在对CSS类进行微管理。这两种方法都不适合RWD-您必须将两者结合才能得到一切。

我的建议是：创建三个或四个不同的“标称分辨率和方向”（例如，桌面横向，iPad纵向和横向，iPhone纵向和横向），并将其作为可以使用的线框。然后为这些休息时间设置媒体查询。然后，要努力工作，坚持不懈地休息，使用流畅的布局来完成它-最有可能使用某种CSS网格（有数十种为您预建，或者您可以自己滚动）。

— 钙磷
source

1

如果您有一个动态网站来获取内容，则可以使用以下代码（在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) {
    ...

注意：“凭据”用于会话cookie

然后，您可以在服务器端读取这些标头，例如（在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) {
        ...

— 阿美·诺玛德（Ame Nomade）
source

这是目前唯一正确的答案。

— marvindanig

1

由于用户无需重新加载页面即可调整浏览器窗口大小的简单原因，这将不起作用。

响应式设计意味着布局会根据不同的视口大小和其他因素而动态变化。因此，如果在请求时根据视口大小将设计固定在服务器端，则如果用户调整窗口大小，它将不会响应。这就是为什么在客户端评估媒体查询的原因。

— 雅克
source