CSS常见问答02

layout viewport、visual viewport 和 ideal viewport 有什么区别？

视口（Viewport）是移动 Web 开发中一个非常重要的概念，最早是由苹果公司在推出 iPhone 手机时发明的，其目的是为了让 iPhone 的小屏幕尽可能完整显示整个网页。通过设置视口，不管网页原始的分辨率尺寸有多大，都能将其缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。在苹果公司引入视口的概念后，大多数的移动开发者也都认同了这个做法。

视口（Viewport）简单来说就是浏览器显示页面内容的屏幕区域。但在移动端浏览器涉及三个视口（Viewport）概念 ：布局视口（Layout Viewport）、视觉视口（Visual Viewport）和理想视口（Ideal Viewport）。

布局视口（Layout Viewport）

布局视口（Layout Viewport）是指浏览器在其中绘制网页的视口，它涵盖页面上的所有元素。布局视口的宽度取决于文档内容，不会随用户在屏幕上缩放页面而变化。

获取布局视口：

document.documentElement.clientWidth | document.body.clientWidth

注意： 一般移动端浏览器都默认设置了布局视口的宽度。根据设备的不同，布局视口的默认宽度有可能是 768px、980px 或 1024px等，这个宽度并不适合在手机屏幕中展示。移动端浏览器之所以采用这样的默认设置，是为了解决早期的 PC 端页面在手机上显示的问题。

视觉视口（Visual Viewport）

视觉视口（Visual Viewport）是指是屏幕上实际可见的内容，不包括屏幕键盘、缩放区域之外的区域或任何其他不随页面尺寸缩放的屏幕控件。视觉视口区域的宽度是指浏览器窗口的宽度，而移动设备的浏览器窗口宽度一般也是整个屏幕的宽度。

获取视觉视口：

window.innerWidth

注意： 当用户缩放页面，或者屏幕键盘等用户界面功能开启/关闭时，视觉视口会变化，但布局视口不会改变。

理想视口（Ideal Viewport）

理想视口（Ideal Viewport）是指对设备来讲最理想的视口尺寸，即布局视口和屏幕宽度一致。采用理想视口的方式，可以使网页在移动端浏览器上获得最理想的浏览和阅读的宽度。

设置理想视口：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no">

获取理想视口：

window.screen.width

letter-spacing、word-spacing、white-space 有什么不同？

  • letter-spacing： 用于控制字符之间的间距，包括英文字母、汉字以及空格等。

  • word-spacing： 用于控制单词之间间距，换句话说，就是是增加空格的宽度。

  • white-space： 用于设置如何处理元素中的 空白 (en-US)，包括空格、换行符、制表符等。

letter-spacing 具有以下一些特性：

  • 默认值是 normal，间距是按照当前字体的正常间距确定的。和 0 不同的是，用户代理根据此属性来确定文字的默认对齐方式；

  • 无论值多大或多小，第一行一定会保留至少一个字符；

  • 一个很大的正或负的值会将字符变为不可读的：设置很大的正值，会使每个字符独占一行，类似垂直排列；设计很大的负值，除第一个字符，会使字符反向排列，除第一个字符，其他字符可能无法阅读；

  • 支持小数值，但不支持百分比值。

white-space 取值如下：

  • normal：连续的空白符会被合并，换行符会被当作空白符来处理；

  • nowrap：连续的空白符会被合并，但文本内的换行无效；

  • pre：连续的空白符会被保留，在遇到换行符或者 br元素时才会换行；

  • pre-wrap：连续的空白符会被保留，在遇到换行符或者 br 元素，或者需要为了填充时才会换行；

  • pre-line：连续的空白符会被合并，在遇到换行符或者 br 元素，或者需要为了填充时才会换行；

  • break-spaces：与 pre-wrap 的行为相同，除了：

    • 任何保留的空白序列总是占用空间，包括在行尾；

    • 每个保留的空格字符后都存在换行机会，包括空格字符之间；

    • 这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容大小和最大内容大小）。

min-width|max-width|width 的覆盖规则？

  • max-width 比 width 小时，即使 width 使用了 !important ，仍是 max-width 生效；

  • min-width 和 max-width 冲突时，min-width 生效。

此规则也适用于 height。

参考资料

布局视口、视觉视口和理想视口分别是什么？

上一页CSS常见问答下一页CSS应用示例

最后更新于