移动web（二）viewport视口、像素密度

最新推荐文章于 2020-02-15 17:35:43 发布

小公举plum

最新推荐文章于 2020-02-15 17:35:43 发布

阅读量651

点赞数

分类专栏： web开发基础移动web开发文章标签：移动 web 手机

web开发基础同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

移动web开发

4 篇文章 0 订阅

订阅专栏

移动web（二）viewport视口、像素密度

1、视口viewport

    以前页面是直接丢到浏览器里面就直接运行了，但是现在移动端，默认会给页面添加了一个中间层，就是页面和浏览器中间会介入一个第三者，就是视口，也就是说视口会把页面包裹起来然后在放到浏览器里面进行渲染，而视口默认的大小一般是980，会比手机的物理设备的尺寸要大，同时视口会自动缩小到手机的屏幕大小，这就是为什么一个PC端的页面扔到移动端的话并没有出现滚动条，而是缩小的本质原因。
    理解的简单一点就是在页面外面包裹了一个默认大小为980（绝大多数）的盒子，这个盒子具备scale功能，并且同时在默认情况下会整体缩放（里面承载的网页也缩小了）到当前用户手机的屏幕大小，这是视口标签最开始出来的意义，持续了一段时间，但是发现这种体验不太好，因为一旦缩小页面就会很小看不清，一旦放大就会又看不完全。所以就有人开始做另一种手机网页模式就是不让视口标签去缩放，也不让用户去缩放，并且让视口的宽度就等于当前设备的宽度，就基于当前的屏幕分辨率去设计专门的设计图，针对差异不大的手机屏幕是采用自适应技术。

【视口标签的参数】

width：宽度设置的是viewport宽度，可以设置device-width特殊值
initial-scale：初始缩放比，大于0的数字（缩放是基于屏幕来的）
maximum-scale：最大缩放比，大于0的数字
minimum-scale：最小缩放比，大于0的数字
user-scalable：用户是否可以缩放，yes或no（1或0）；

用meta标签把viewport的宽度设为device-width，同时initial-scale=1，user-scalable =0就构建了一个标准的移动web页面

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, 
                          initial-scale=2.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>视口</title>
</head>

2、移动端尺寸基础知识

http://colachan.com/post/3435

像素密度

    屏幕是由很多像素点组成的。手机屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone 3gs的屏幕像素是320x480，iPhone 4s的屏幕像素是640x960。刚好两倍，然而两款手机都是3.5英寸的。所以，要引入最重要的一个概念：像素密度，也就是PPI（pixels per inch）。这项指标是连接数字世界与物理世界的桥梁。Pixels per inch，准确的说是每英寸的长度上排列的像素点数量。1英寸是一个固定长度，等于2.54厘米，大约是食指最末端那根指节的长度。像素密度越高，代表屏幕显示效果越精细。Retina屏比普通屏清晰很多，就是因为它的像素密度翻了一倍。
    Retina屏幕把2x2个像素当1个像素使用。比如原本44像素高的顶部导航栏，在Retina屏上用了88个像素的高度来显示。导致界面元素都变成2倍大小，反而和3gs效果一样了。画质却更清晰。在以前，iOS应用的资源图片中，同一张图通常有两个尺寸。会看到文件名有的带@2x字样，有的不带。其中不带@2x的用在普通屏上，带@2x的用在Retina屏上。只要图片准备好，iOS会自己判断用哪张，Android道理也一样。
    由此可以看出，苹果以普通屏为基准，给Retina屏定义了一个2倍的倍率（iPhone 6plus除外，它达到了3倍）。Retina是一种显示技术，可以将把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。实际像素除以倍率，就得到逻辑像素尺寸。只要两个屏幕逻辑像素相同，它们的显示效果就是相同的。