javascript - 有没有一种方法可以使页面布局在 100% 缩放时完美匹配,同时也尊重更大的缩放因子?

标签 javascript css layout zooming

有多种方法可以布局网页以适合浏览器视口(viewport)(DOM window)。当我说“适合”时,我包括更改所用字体的大小,更改 DIV、IMG 和其他渲染元素的宽度和高度,以及允许元素的“流畅”移动。目标是使页面在所有显示设备上看起来都“漂亮”,从小手机到大桌面屏幕。这些布局方式包括使用 CSS em% 大小、文本和元素的换行,以及由 onloadonresize< 运行的 JavaScript/ 事件。布局调整可以几乎完美地工作,跨浏览器,但复杂的结果可能对浏览器缩放不敏感,因为缩放会神奇地改变窗口宽度,这意味着没有任何独立于浏览器的可靠方法来检测缩放(DOM 和CSS 标准忽略浏览器缩放)。无法检测由于小设备屏幕导致的小窗口宽度与由于大缩放因子导致的小窗口宽度之间的差异。我们希望以不同的方式处理这两种情况,因为视力受损的用户需要尊重缩放系数。

有没有人成功地以尊重缩放的方式很好地调整布局(包括更改字体大小)?例如,如果用户访问缩放 200% 的页面,最初应该只显示页面的左上四分之一(其余部分可通过水平和垂直滚动显示),而同一页面将完全适合窗口对于另一个将缩放设置为 100% 的用户。

最佳答案

确实要有一个流畅的布局,你将不得不使用 % 而不是像素来确定宽度。 并且为了适应屏幕使用 100%

关于javascript - 有没有一种方法可以使页面布局在 100% 缩放时完美匹配,同时也尊重更大的缩放因子?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15933943/

相关文章:

css - 背景图片未出现在特定页面上

android - 如何在不使用绝对布局的情况下正确定位android布局?

html - 了解 Firefox 3.5 和 Internet Explorer 8 中的 td 宽度

javascript - 为什么我的随机数生成器总是给我一个?

javascript - Ember.js:如何在模态弹出窗口中的模板上显示模型的当前内容

图片的 HTML 链接不起作用

jquery - 垂直小时标签

html - Div 高度属性在 Chrome 中无法正常工作

javascript - 如何在jquery ionrangeslider的回调函数中获取 slider 的名称?

javascript - 使用 $httpBackend 模拟 $http 调用更改预期的 url Angular