Viewport

yzzz 发布于2019-08-01 18:40 / 932人阅读

摘要：一个移动专属的值，用于定义视口的各种行为布局视口视口的分辨率接近于显示器视觉视口手持设备物理屏幕的可视区域完美视口它类似于布局视口，但宽度和视觉视口相同，用户不用缩放和拖动网页就能够很好的进行网页浏览。

一个移动专属的Meta值，用于定义视口的各种行为

layout viewport(布局视口)

视口的分辨率接近于PC显示器

visual viewport(视觉视口)

手持设备物理屏幕的可视区域

ideal viewport(完美视口)

它类似于布局视口，但宽度和视觉视口相同，用户不用缩放和拖动网页就能够很好的进行网页浏览。而完美视口也是通过viewport meta的某种设置来达到

参数设置：

width 控制Viewport的宽度,可以指定一个值或者设备的宽度,如device-width为设备的宽度(单位为设备缩放比例1:1的像素),这里设置的宽度等于设备宽度;

initial-scale 初始缩放,即页面初始缩放程度.对应的值是一个浮点值,这里是一个乘积关系,页面呈现大小等于设置的宽度乘以initial-scale的值;

maximum-scale 最大缩放,即允许用户缩放的最大比例,也是乘积关系.一般设置为1:1的比例不会让用户缩放的;

minimum-scale 最小缩放,如上;

user-scalable 用户是否可以手动缩放,一般值设为no,不允许用户缩放;

让viewport的宽度为设备宽度，在viewport中布局完成后显示在屏幕上时不缩放，即布局是怎样，显示就是怎样。这样我们在制作网页时只需要直接针对手机屏幕大小进行设计:

超融合服务器专线服务 viewport viewport布局

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

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

【移动端web开发】（二）深入viewport

摘要：当你进行页面放大的时候，原本在未缩放的页面上看起来很小的尺寸，现在通过看上去变大了，事实上这部分的的值并没有变化，仅仅是因为进行放大后，的的值所占的屏幕分辨率的值变大了。同理的的值并没有发生变化但是值所占的屏幕分辨率的值变小了。前言通过上一篇我们已经大概明白viewport是什么，但是viewport并没有那么简单，一包研究得身心疲惫，脑子一个不够用哈哈，让我们一起看看吧！三个v...

Baoyuan 2019-08-22 16:58 评论0 收藏0
visual viewport和layout viewport

摘要：原本在未缩放的页面上看起来很小的尺寸，现在通过看上去变大了，事实上这部分的的值并没有变化，仅仅是因为进行放大后，的的值所占的屏幕分辨率的值变大了。同理的的值并没有发生变化但是值所占的屏幕分辨率的值变小了。首先了解几个概念: 物理像素：买手机的时候会有一个 n x m 的分辨率，那是屏幕的n x m个呈像的点，一个点（小方格）为一个物理像素。它是屏幕能显示的最小粒度. CSS像素：就...

taowen 2019-08-01 15:29 评论0 收藏0
移动前端中 viewport （视口）

摘要：一的概念端实际上等于浏览器窗口，拥有浏览器窗口的宽度和高度，元素使用宽度的在未手动设置元素宽度情况下。用获取元素本身的尺寸移动端分为和。大小由设备本身决定。所有的缩放规则都是相对于而言的，而与多宽无关。一、viewport的概念 PC端 viewport实际上等于浏览器窗口，拥有浏览器窗口的宽度和高度，元素使用viewport宽度的100%（在未手动设置html元素宽度情况下）。用d...

mo0n1andin 2019-08-05 17:51 评论0 收藏0
移动前端中 viewport （视口）

摘要：一的概念端实际上等于浏览器窗口，拥有浏览器窗口的宽度和高度，元素使用宽度的在未手动设置元素宽度情况下。用获取元素本身的尺寸移动端分为和。大小由设备本身决定。所有的缩放规则都是相对于而言的，而与多宽无关。一、viewport的概念 PC端 viewport实际上等于浏览器窗口，拥有浏览器窗口的宽度和高度，元素使用viewport宽度的100%（在未手动设置html元素宽度情况下）。用d...

only_do 2019-08-30 15:52 评论0 收藏0
移动前端中 viewport （视口）

摘要：一的概念端实际上等于浏览器窗口，拥有浏览器窗口的宽度和高度，元素使用宽度的在未手动设置元素宽度情况下。用获取元素本身的尺寸移动端分为和。大小由设备本身决定。所有的缩放规则都是相对于而言的，而与多宽无关。一、viewport的概念 PC端 viewport实际上等于浏览器窗口，拥有浏览器窗口的宽度和高度，元素使用viewport宽度的100%（在未手动设置html元素宽度情况下）。用d...

LiangJ 2019-08-01 16:12 评论0 收藏0
移动端适配之二：visual viewport、layout viewport和ideal view

摘要：对于，浏览器全屏状态下，其的值为。的大小可以通过和，实际使用中可能会有一些兼容问题，这跟声明有关。是为了能将电脑上的网页正确的显示到手机上。调整的大小，让其在的查看下有最佳效果，就是我们想要的移动端适配。上一篇博文，可算把像素这个东西讲清楚了。在这篇博文里面，将继续介绍viewport相关的内容。很多博客都会提到PPK所讲的三个viewport，有的讲的比较复杂，看的云里雾里，我这...

darkerXi 2019-08-30 15:55 评论0 收藏0