【郑州-第四十九期】name="viewport" 的作用

name=x26quot;viewportx26quot; 的作用1.背景介绍移动端浏览器在一个通常比屏幕更宽的虚拟”窗口“...



name="viewport" 的作用

1.背景介绍

移动端浏览器在一个通常比屏幕更宽的虚拟”窗口“（视口）中渲染页面，从而无需将所有页面都压缩进小屏幕里（那样会把很多没有针对移动端进行优化的站点打乱）。 用户可以通过平移和缩放来浏览页面的不同区域。Mobile Safari 引入了”viewport元标签“来让web开发者控制视口的尺寸及比例。

如今许多其他移动端浏览器已经支持这一标签，虽然它不是任何web标准的一部分。苹果的文档详尽地说明了web开发人员可以怎样使用这一标签。

2.知识剖析

一个典型的针对移动端优化的站点包含类似下面的内容：

width属性控制视口的宽度。可以像width=600这样设为确切的像素数，或者设为device-width这一特殊值来指代比例为100%时屏幕宽度的CSS像素数值。

initial-scale属性控制页面最初加载时的缩放等级。

maximum-scale、允许用户缩放到的最大比例，范围从0到10。

minimum-scale允许用户缩放到的最小比例，范围从0到10。

user-scalable属性控制允许用户以怎样的方式放大或缩小页面。值可以是：①yes、 true允许用户缩放；②no、false不允许用户缩放。

3.常见问题

如果改变content的属性值，分别有怎样的变化？

4.解决方案

http://119.10.57.69:880/ptt202/viewport/viewport.html

5.实战

如上。

6.扩展思考

除了还有没有别的元标签？

，主要是用来告诉搜索引擎，网站的主要内容是什么。

，用来告诉搜索引擎，网站的主题是什么，比如说偏重于前端后端或者是某种编程语言等等。

，告诉爬虫哪些页面需要索引，哪些页面不需要索引。

声明文档的编码方式

告知浏览器以什么版本渲染文档

告知浏览器选择什么内核渲染

禁止浏览器从本地计算机的缓存中访问页面内容。大概就是你访问一个页面后本地会有缓存，         此时断网浏览该网站将会无法显示内容。

禁止百度转码。

cookies的有效期。         过了这个时间，网页存储在本地的cookies将会被删除。时间格式必须是GMT的时间格式。

7.参考文献

https://developer.mozilla.org/zh-CN/docs/Mobile/Viewport_meta_tag

8.更多讨论

如果不使用meta元标签，是否有别的方式可以适配移动端？

PPT链接：

https://ptteng.github.io/PPT/PPT/css-03-viewport.html#/

    关注 葡萄藤IT技能树