摘要：现在开始，用标签来设置。回到应用场景，我们用这个标签的主要目的是做移动端的适配，一般都是做一个专门为移动端设计的页面。利用这个，就是用来设置的宽度。小结用的目的，是为了设置的大小，从而保证能在移动端设备上合适的显示出来。
前两篇博客，把像素和viewport的概念讲清楚了。现在开始，用meta标签来设置viewport。
meta标签meta标签里面的内容，主要是提供关于这个HTML页面的元信息的。简单点说，就是你用这些信息来告诉浏览器，应该如何解析这个HTML文件。比如
这个标签是告诉浏览器，该HTML文件的字符编码格式是utf-8。当浏览器解析该HTML文件时，由于meta标签位于头部，会先获取到这个信息，然后浏览器就用这个utf-8编码来解析这个HTML文件中的字符。
当然，除了上面这种简单的格式外，meta标签更常见的是这种name + content的形式：
name属性的值告诉浏览器，这个meta标签设置的是format-detection，其具体值是content中的telephone=no，即忽略将数字识别成电话号码。
viewport的设置上一篇博客的最后已经提到，我们所做的适配，就是要调整layout viewport的大小，而用meta标签就可以调整layout viewport的大小。上网去搜移动端适配，一定会看到下面这句代码：
先介绍一下这几个属性：
| 属性名 | 说明 |
|---|---|
| width | 设置layout viewport的宽度，为一个正整数，或字符串width-device |
| initial-scale | 设置页面的初始缩放值，为一个数字，可以带小数 |
| minimum-scale | 允许用户的最小缩放值，为一个数字，可以带小数 |
| maximum-scale | 允许用户的最大缩放值，为一个数字，可以带小数 |
| height | 设置layout viewport的高度，这个属性对我们并不重要，很少使用 |
| user-scalable | 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许 |
| target-densitydpi | 值可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个。安卓中支持，当 target-densitydpi=device-dpi 时， css中的1px会等于物理像素中的1px。 |
回到应用场景，我们用这个标签的主要目的是做移动端的适配，一般都是做一个专门为移动端设计的页面。所以，我们在设置layout viewport时，当然希望这个viewport的尺寸等于ideal viewport。
需求已经明确了，接下来看看我们如何利用上面表里的属性来实现。
利用width这个width，就是用来设置layout viewport的宽度。我们设置其值为device-width，也就是设置成设备的实际宽度。而ideal viewport的宽度是与设备的宽度相等的，所以，这句代码就把viewport设置成了ideal viewport的大小。可以分别用window.innerWidth和document.document.clientWidth查看：
当然，只要你高兴，也可以设置成别的值，比如把宽度设置成1000，那么layout viewport就会比visual viewport大，浏览时会有一个滚动条。具体实现时，代码上最好加上initial-scale=1.0，防止浏览器对页面进行缩放。
利用scaleInitial-scale用来设置初次加载页面时layout viewport相对于ideal viewport的大小。具体计算公式是：
layout viewport = ideal viewport / scale scale = ideal viewport / layout viewport
需要注意的是，利用scale设置，无论计算出来的layout viewport的值大小如何，最后都会被浏览器自动缩放到与visual viewport大小相等，并不会出现滚动条。具体看下面的例子，我们设置的红框大小为100x100px，字体大小为32px。
initial-scale=1.0设置scale值为1.0，那么layout viewport的大小与ideal viewport大小相等：
此时红框显示出来的大小就是100px，字体大小也就是32px。
initial-scale=0.5设置scale值为0.5，那么layout viewport的大小就是ideal viewport的两倍，即750px：
但是浏览器会把layout viewport进行缩放，从而达到与visual viewport大小适配。对于已经是visual viewport750px的layout viewport，需要缩放到以前的0.5倍，才能正好适配375px。所以，100px的红框看起来只会有50px的大小，字体也会对应的缩小一半。如果设计图的大小是750px，那么样式大小完全可以按照设计图来写，最后只要设置scale为0.5，视觉上的效果就是缩小后的。
这里用window.innerWidth打印出来的visual viewport大小不对，用screen.width打印出来是对的，具体原因网上也没查到。有知道的同学欢迎在评论区留言~
initial-scale=2.0设置scale的值为2，那么layout viewport的大小就是ideal viewport的一半，即188px：
同样的，浏览器会自动缩放。本来是188px的layout viewport，需要放大两倍，才能填满visual viewport。此时，100px的红框会被放大成200px，字体大小会放大到64px。
同时使用width和scale两种方式都可以实现，但是兼容性不同。我们的目的，是为了把layout viewport设置成ideal viewport的带下。为了能兼容所有的设备，就有了下面的方案：
如果两者设置的大小不一样，那么会取较大者。设置width为device-width，然后再设置缩放值为1，就完全限制了layout viewport的大小为visual viewport了。其他的属性，都是来控制缩放的。其实，设置了maximum-scale=1.0, minimum-scale=1.0就相当于设置了user-scalable=no了。如果不禁用缩放，那么layout的viewport的大小在缩放时还是会变的。
小结用viewport的目的，是为了设置layout viewport的大小，从而保证能在移动端设备上合适的显示出来。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116352.html
摘要：移动客户端的开发类型原生，也就是完全使用移动设备系统语言写的客户端，就是纯，安卓就是纯就是用户看到的界面体验到的交互都是原生的。 前端是个很大的概念，我的理解是用户能够看到，直接接触到的层面都算是前端，比如IOS客户端界面，安卓客户端界面，网页界面，甚至PC/MAC 桌面端软件界面；现在最常见的说法一般是指Web前端，也就是针对于网页端开发的工作。 Web App就是以浏览器作为客户端...
摘要：移动客户端的开发类型原生，也就是完全使用移动设备系统语言写的客户端，就是纯，安卓就是纯就是用户看到的界面体验到的交互都是原生的。 前端是个很大的概念，我的理解是用户能够看到，直接接触到的层面都算是前端，比如IOS客户端界面，安卓客户端界面，网页界面，甚至PC/MAC 桌面端软件界面；现在最常见的说法一般是指Web前端，也就是针对于网页端开发的工作。 Web App就是以浏览器作为客户端...
阅读 2316·2023-04-26 02:57
阅读 1222·2023-04-25 21:40
阅读 1740·2021-11-24 09:39
阅读 3332·2021-08-30 09:49
阅读 557·2019-08-30 15:54
阅读 1050·2019-08-30 15:52
阅读 1904·2019-08-30 15:44
阅读 1182·2019-08-28 18:27
