不同浏览器中的不同窗口/正文大小

Question

我正在实现一个流畅的布局，这意味着屏幕上元素的大小是使用百分比计算的，而不是硬编码的像素。

我注意到的一件事是，在具有最大化窗口的同一屏幕上，不同的浏览器只是具有不同的 body 大小开始！因此，相同的div 在不同浏览器中的大小和位置会略有不同。

我在 Chrome、FF 和 Safari 中进行了测试，它们的最大尺寸分别为：1280 x 702、1279 x 687、1280 x 684。似乎主要区别在于高度，这可能是由于 URL 栏、选项卡等的不同设计/位置所致？

这是开发人员必须忍受的事情吗（尤其是在使用流畅布局时）？如果是这样，是否有任何补救措施来确保元素在不同浏览器中始终具有完全相同的大小？或者还有什么我遗漏的东西导致了这种差异？

Answer 1

使用流畅的布局意味着您的布局必须能够适应几乎任何分辨率，因此您最不关心的是 1280x768 显示器上最大化浏览器之间的细微差别。人们拥有不同尺寸的显示器（或手机屏幕或平板电脑），而且他们不仅仅查看最大化的页面。您的布局需要流畅而不会中断，以匹配人们将浏览器调整到的任何宽度。这很困难，这就是为什么带有装订线的固定宽度页面在简单网站中更受欢迎的原因。

附：如果您要进行 Web 开发，您应该得到一台分辨率至少为 1920x1080 的显示器。这就是现在很多人正在查看您的网站的内容，除非您有匹配的显示器，否则您将无法看到它的外观。此外，它还会为您提供更多的屏幕空间来处理您的代码。