移动端尺寸适配布局概念

视图与布局解析

最新推荐文章于 2025-02-18 14:05:33 发布

转载最新推荐文章于 2025-02-18 14:05:33 发布 · 314 阅读

app开发同时被 2 个专栏收录

22 篇文章

订阅专栏

浏览器

5 篇文章

订阅专栏

本文探讨了视觉视口与布局视口的概念。视觉视口是指当前屏幕显示的页面部分，而布局视口则用于计算CSS布局，特别是百分比宽度。布局视口通常比视觉视口宽，以确保网站布局与桌面浏览器行为一致。不同浏览器的布局视口宽度各不相同。

Visual viewport

The visual viewport is the part of the page that’s currently shown on-screen. The user may scroll to change the part of the page he sees, or zoom to change the size of the visual viewport.

Layout viewport

However, the CSS layout, especially percentual widths, are calculated relative to the layout viewport, which is considerably wider than the visual viewport.
Thus the element takes the width of the layout viewport initially, and your CSS is interpreted as if the screen were significantly wider than the phone screen. This makes sure that your site’s layout behaves as it does on a desktop browser.
How wide is the layout viewport? That differs per browser. Safari iPhone uses 980px, Opera 850px, Android WebKit 800px, and IE 974px.

In short, the layout viewport is generally the width of the viewport when the screen is zoomed all the way out.