移动端布局基础viewport

yanest 发布于2019-08-02 10:07 / 680人阅读

摘要：虚拟窗口移动浏览器默认情况下把设置为一个比较宽的值防止太窄而在可视区域中显示错乱。宽度可通过获取不支持一个完美适配移动设备的。移动端默认使用的是，而我们想要达到类似的效果的话，可以通过标签来对进行控制。

划重点

手机屏幕相对着桌面浏览器小，传统网页的设计在手机上体验糟糕

Apple 在移动版 Safari 中定义了 viewport meta 标签(如果没记错最早提出的话)，用于创建一个虚拟窗口（layout viewport），这个虚拟窗口的分辨率接近于桌面显示器，Apple将其定义为980px。然后将虚拟窗口映射到移动设备的屏幕上，按比例缩放并重新渲染网页。

虚拟窗口layout viewport

移动浏览器默认情况下把 viewport 设置为一个比较宽的值（防止太窄而在可视区域中显示错乱）。该默认的 viewport 称为
layout viewport。宽度可通过 Js 获取(基本所有设备都支持)

document.documentElement.clientWidth

视觉窗口visual viewport

浏览器可视区域大小。可理解为手机物理屏幕。宽度可通过 Js 获取(不支持Android2, Opera Mini, UC8)

ideal viewport

一个完美适配移动设备的 viewport。理想状态是不需要用户缩放和横向滚动条就能正常查看，显示的文字大小合适，不区分分辨率，屏幕密度等。

移动端默认使用的是 layout viewport ，而我们想要达到类似 ideal viewport 的效果的话，可以通过 meta标签来对 viewport 进行控制。

移动开发中必出场的定义

用来实现 ideal viewport 的效果。

总结

通过meta viewport 标签的设置让layout viewport 达到ideal viewport的效果。

GPU云服务器云服务器移动端布局 viewport布局 web移动端布局移动端

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52135.html

移动端布局基础viewport

摘要：虚拟窗口移动浏览器默认情况下把设置为一个比较宽的值防止太窄而在可视区域中显示错乱。宽度可通过获取不支持一个完美适配移动设备的。移动端默认使用的是，而我们想要达到类似的效果的话，可以通过标签来对进行控制。划重点手机屏幕相对着桌面浏览器小，传统网页的设计在手机上体验糟糕 Apple 在移动版 Safari 中定义了 viewport meta 标签(如果没记错最早提出的话)，用于创建一...

learning 2019-08-30 14:23 评论0 收藏0
0基础学习移动端适配

摘要：布局视口就是移动设备上用来装载我们的网页的那一块区域。最常见的宽度是。虽说是没有滚动条，但是端能友好显示的页面，在移动端上就显示的很怪异。这是关于移动端适配的第一篇文章，这篇文章主要介绍视口以及和视口有关的meta标签的使用。不管三七二十一，我们先新建一个页面：这不是一个demo *{mar...

Galence 2019-08-02 11:24 评论0 收藏0
浅谈移动端中的视口（viewport）

摘要：在端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。本文主要讨论移动端中的视口。因此，引入了布局视口视觉视口和理想视口三个概念，使得移动端中的视口与浏览器宽度不再相关联。在 PC 端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中，视口也被称为初始包含块，它是所有 CSS 百分比宽度推算的根源，给 CSS 布局限制了一个最大宽度。...

LucasTwilight 2019-08-02 11:38 评论0 收藏0
浅谈移动端中的视口（viewport）

摘要：在端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。本文主要讨论移动端中的视口。因此，引入了布局视口视觉视口和理想视口三个概念，使得移动端中的视口与浏览器宽度不再相关联。在 PC 端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中，视口也被称为初始包含块，它是所有 CSS 百分比宽度推算的根源，给 CSS 布局限制了一个最大宽度。而移动...

selfimpr 2019-04-23 13:19 评论0 收藏0