html - 不同浏览器中的不同窗口/主体大小

标签 html css fluid-layout

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

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

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

这是开发人员不得不忍受的事情吗(尤其是在使用流动布局时)?如果是这样,是否有任何补救措施来确保元素在不同浏览器中始终具有完全相同的大小?还是我遗漏了其他导致此类差异的原因?

最佳答案

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

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

关于html - 不同浏览器中的不同窗口/主体大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18018728/

相关文章:

jquery - 加载图像时的消息

html - 在标题之后,将点设置到页面边缘

javascript - 关闭模式窗口 JQuery?

javascript - 在 JavaScript 中计算两个长度的最小值

javascript - 在索引 html 顶部弹出登录表单

jquery - 响应式 Masonry jQuery 布局示例

Javascript em resize based on window/viewport dimension not affect in-doc style text/css?

html - 如何在内联 CSS 中定义 CSS 类?

CSS - 段落 - 我需要设置字体大小 : inherit?

html - 流体布局 : aside element larger than main element