扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
设置 Viewport
创新互联公司专业为企业提供仙游网站建设、仙游做网站、仙游网站设计、仙游网站制作等企业网站建设、网页设计与制作、仙游企业网站模板建站服务，10年仙游做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
head
meta name="viewport" content="width=device-width, initial-scale=1.0"
!--这是最常用的--
/head
什么是 Viewport?
viewport 是用户网页的可视区域。
viewport 翻译为中文可以叫做"视区"。
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。
head元素内放着网页中的元数据，比如页面编码，标题，样式文件，js文件的链接，还有关键字，描述和页面作者之类的
body元素没放着整个页面的内容代码，所有在浏览器上显示的东西的代码都在那里写的
一、指代不同
1、head标签：是网页的HEAD(头)部分中包含有的内置标签，用来申明使用的脚本语言，以及网页传输时使用的方式等。
2、header标签：header标签是HTML5新增标签元素。
二、浏览器支持不同
1、head标签：浏览器都支持。
2、header标签：旧版本浏览器均不支持，需要IE9+以上浏览器、最新谷歌Chrome等浏览器才支持。
三、支持属性不同
1、head标签：head 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
2、header标签：header 标签支持 HTML 中的全局属性。
参考资料来源：百度百科-head标签
参考资料来源：百度百科-Header
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网