移动web学习笔记

Posted 2020-08-15

viewport:

一、viewport其实就是把你整个页面渲染到一个比例比较大的viewport里面，通过缩放让你看的到整个页面。ios的viewport为980px。android的不一定，有640px 1000px  或者更大。

一些设备上浏览器的默认viewport的宽度如下：

实际上，在移动设备上看这样一个页面时，手机浏览器为我们默认做了两件事情：

（1）、把页面渲染在一个980px（IOS）的viewport里面

（2）、渲染完后，通过缩放让我们看到整个页面的全貌。

有些人可能会说，那直接缩放就好了为什么还要渲染？那是因为直接把一个一千多像素的页面缩放到一个300多像素的屏幕上，排版会乱掉，样子通常看起来也会很丑。所以为了排版正确，引入了viewport，先让排版正确后再缩放到移动设备屏幕上。

二、viewport一般分为三个viewport: 布局viewport 、视觉viewport及理想viewport

1、布局viewport ,在手机上，为了容纳为桌面浏览器设计的网站，默认的布局视口宽度。注意，它不是页面的宽度，IOS下默认为是980px。我们可以通过document.documentElement.clientWidth来获取到布局viewport的值。

2、视觉viewport，与屏幕宽度一样宽，代表 浏览器可视区域的大小，但它的css像素的数量会随着用户缩放而改变。也可以理解为窗口缩放 scale。注意，它并不是设备的宽度。我们可以通过window.innerWidth来获取视觉viewport的值

3、理想 viewport是最适合移动设备的viewport，宽度等于移动设备的屏幕宽度。理想viewport 的意义在于，无论在何种分辨率的屏幕下，那些针对理想 viewport而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户。我们可以通过screen.width来获取理想viewport的值。

三、我们为什么不使用默认的布局viewport呢？

1) 宽度不可控制。不同的系统不同设备的默认值都可能不同。比如android可能有640，1000或者更大。

2) 页面缩小显示，不友好

3) 链接不可点

4) 有缩放，缩放后有滚动条。

四、meta标签

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

width: 设置布局 viewport  的宽度，为一个正整数，或字符串"device-width"

initial-scale：设置页面的初始缩放值，为一个数字，可以带小数

minimum-scale：允许用户的最小缩放值，为一个数字，可以带小数

maximum-scale：允许用户的最大缩放值，为一个数字，可以带小数

user-scalable：是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

Initial-scale: 设置页面的初始缩放值。首先要弄明白这个缩放是相对于什么来缩放的，答案是相对于 理想 viewport来进行缩放的，缩放值越大，当前视觉viewport的宽度就会越小，反之亦然。例如在iphone中，理想 viewport的宽度是320px，如果我们设置 initial-scale=2 ，此时视觉viewport的宽度会变为只有160px了，这也好理解，放大了一倍嘛，就是原来1px的东西变成2px了，但是1px变为2px并不是把原来的320px变为640px了，而是在实际宽度不变的情况下，1px变得跟原来的2px的长度一样了，所以放大2倍后原来需要320px才能填满的宽度现在只需要160px就做到了。因此，我们可以得出一个公式：

视觉viewport =  理想viewport/ 当前缩放值

当前缩放值 =理想viewport/视觉viewport

当前缩放值 = screen.width / window.innerWidth

在iphone和ipad上，无论你给viewport设的宽的是多少，如果没有指定默认的缩放值，则iphone和ipad会自动计算这个缩放值，以达到当前页面不会出现横向滚动条(或者说viewport的宽度就是屏幕的宽度)的目的。

综上所述，如果我不给设定initial-scale的值，设备会根据你页面的大小自动调整缩放比，因而，不同设备下的视觉viewprot就会不同，这不是我们想要的结果，所以我们所以我们就把initial-scale=1 ，来统一缩放比，让我们的视觉viewport等于设备viewprot.

所以我们最完美的写法是：

<meta name=“viewport” content=“width=device-width,initial-scale=1.0,user-scalable=no">