viewport就是浏览器上，用来显示网页的那一部分区域了，也就是说，浏览器的实际宽度，是和我们手机的宽度不一样的，无论你的手机宽度是320px，还是640px，在手机浏览器内部的宽度，始终会是浏览器本身的viewport。下面学步园小编来讲解下viewport是用来干什么？怎样使用viewport？
viewport是用来干什么
viewport的默认值，一般来说是大于手机屏幕的。这样就可以做到当我们在浏览桌面端网页的时候，可以让桌面端端网页正常显示（我们普通页面设计的时候，一般页面的主区域是以960px来做的，所以980px这个值，可以做到桌面端网页的正常显示）。但是，其实我们手机的屏幕宽度是没有960px的，因此浏览器会出现横向滚动条。同时，即使是基于980的viewport，我们在移动端浏览我们的桌面页面的体验其实也并不好，所以，一般的，我们会专门给浏览器设计一个移动端的页面。
对viewport的控制
如今可以绝大部分浏览器里（即主流的安卓浏览器和ios），都支持对viewport的一个控制了。一般的，我们会这么写。
viewport默认有6个属性
width:设置viewport的宽度（即之前所提及到的，浏览器的宽度详），这里可以为一个整数，又或者是字符串"width-device"
initial-scale:页面初始的缩放值，为数字，可以是小数
minimum-scale:允许用户的最小缩放值，为数字，可以是小数
maximum-scale:允许用户的最大缩放值，为数字，可以是小数
height:设置viewport的高度（我们一般而言并不能用到）
user-scalable:是否允许用户进行缩放，'no'为不允许，'yes'为允许
我们把这个标签是在head里面，像这样
?
1
这样就可以做到对viewport的控制了
使用rem布局
简单说下rem
rem是根据页面的根元素的font-size的一个相对的单位，即
?
html{
font-size:16px;
}
比如当我们在一个div中，如此写
?
div{
width:2rem;
}
那么我们的width，是16*2=32px
rem做到适配不同分辨率
这个是现在手机淘宝的移动端的解决方案，即使用rem的特性，来对页面进行布局。
怎样使用viewport
下面举一个例子
假定设计稿的大小为750，那么我们则将整个图分成100份来看（下面的题外话会说明为什么会分成100份来看）
那么，我们现在就让根部元素的font-size为75px
?
html{
font-size:75px;
}
那么，我们现在就可以比对设计稿，比如设计稿中，有一个div元素，宽度，高度都为75px,那么我们这样写即可
?
div{
height:1rem;
width:1rem;
}
可能看到这里，一些人还是不明白怎么用rem做到适配不同的分辨率，那么我们再来
现在，我们换设备了，不用这个设备是一个width为640的手机
那么这个时候，我们的rem单位就起到作用了。
我们的rem全是根据html的font-size来改变的，所以说，这个时候，我们只需要把html下的font-size改成64px。那么，我们之前的div，因为是根据html下的font-size动态变化的，那么。此时也就变成了宽度和高度都为64px的东西了。这样，就可以做到适配不同的屏幕分辨率了。（其实就是个等比缩放）
总结一下，我们的解决方案，其实就是设计稿的像素/html的font-size=用来代替px的rem。
这一个步骤，我们需要通过JS来进行操作。
对于js的操作在下面会提到。
DPR的问题
视觉姐姐给了我们设计稿，并交由我们实现，那么，我们应该去认真的实现:-)（试想你做了一张图，而前端很多地方并没有按照你所想的，你所给的去做，而是私自改变了很多东西，你肯定会不高兴的）
那么1px会出现什么问题呢。
还记得我们第二大点讲的，我们的设备，是有物理像素和逻辑像素的。而假设我们的设计稿是750的，同时还是以iphone6为例，此时如果我们的viewport是这样的
之前说过，在不做任何缩放的条件下，iphone6获取到的viewport为375px。
然后我们的页面中有个div，他有一个边框值，如下
div{
height:5rem;
widht:5rem;
border:1pxsolid#000
}
此时我们写的1px，实际上是逻辑像素，而我们在iphone6上看到的是物理像素，于是这个时候，我们眼睛所看到的其实是2px（参考第二点第三个问题）
所以此时我们需要在viewport上做文章了，此时先明确，如果要获取到真正的1px，那么我们需要这么做，将viewport改为
即对屏幕做0.5倍的缩放。这样，我们就能得到实际的1px。
所以到这里，我们还要明确一点，viewport的meta标签，我们这里也只能通过js来动态生成。
同时，这样写，据说还可以避免比如inline的SVG等元素按照逻辑像素的渲染。避免了整个页面清晰度的打折（其实我并不能看出来）
文字适配问题
最近深深纠结与rem与px做字体单位的问题，还是先分别谈下二者吧。
rem与px的特点：
以rem作为字体单位:我们可以让页面整体的文字，也跟随着html的font-size来进行改变，这样，在不同的屏幕下，可以做到文字相对屏幕的比例是一样的。
以px作为字体单位:这个是目前很多网站还是依然采用的方法。因为以上面所写的，以rem作为字体单位。无论在任何屏幕下面，我们的文字都会根据屏幕做一个适应。试想这样一个场景。你买了一个大屏手机（5.7寸的），而别人用的是4寸的手机。以rem作为字体单位的话，那大屏手机看到的文字多少和小屏手机确实一样的了。这样来做，其实并不符合我们买大屏手机的期待。同时，以rem作为字体单位，可能会导致出现很多奇怪的字体大小（毕竟是根据html的font-size动态变化的嘛），同时这其中还涉及到了一个点阵尺寸的概念，这个在下面来讲。
字体大小引发的系列问题：
字体大小：我们平时也看过，很多网站，是不以奇数作为字体大小的。我稍微查了些东西，在知乎上的现在网页设计中的为什么少有人用11px、13px、15px等奇数的字体？问题下，有一些比较好的解答，我就不再多说（我也并不能比这个问题说的更多），总的来说，其实就是偶数宽度的字体能够显得均衡，以及一个点阵的问题。不过因为要谈及点阵，所以我拿上面回答中的一个内容举例。
倘若一个字体，只提供了12px，14px，16px的点阵。那么当你写13px，15px，17px的时候。就并没有其字体大小所对应的点阵。那么这样就造成了一个问题。他们会使用其相邻的点阵，比如对应使用了12px，14px，16px的点阵，而导致一个问题，文字占用的大小确实改变，但点阵却并没有改变。
文字适配的解决方案：
上面说了这么多，我们总要有一套解决方案吧
对于一些标题性的文字，我们依然可以用rem。让他随着屏幕来进行缩放，因为标题性文字一般较大，而较大的文字，点阵对其影响就越小。这样，即使出现奇怪的尺寸，也能够让字体得到很好的渲染。
对于一些正文内容的文字（即站在使用者的角度，你不希望他进行缩放的文字）。我们采用px来进行处理。
以上就是关于“viewport是用来干什么？怎样使用viewport”的内容，希望对大家有用。更多资讯请关注学步园。学步园，您学习IT技术的优质平台!