HTML5-meta标签之视口Viewport

<meta name="viewport" content="视口的属性" />

height ： 视口的高度

width ： 视口的宽度

device-height： 设备屏幕的输出高度

device-width ：设备屏幕的输出宽度

initial-scale：初始比例，页面加载时的默认比例1.0

user-scalable：指定用户是否可以对页面进行缩放 yes允许/no不允许

minimum-scale：最小允许缩放的比率1.0

maximum-scale：最大允许缩放的比率1.0

拓展：

meta 标签新增 minimal-ui 属性，让网页在加载时便可隐藏顶部的地址栏与底部的导航栏【IOS】

miniual-ui ios的safari为meta表天新增的属性，在网页加载是隐藏顶部的地址栏和底部的导航栏

完整视口的写法：

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

width=device-width这意思是，最大宽度就是你的屏幕宽度

https://www.jianshu.com/p/9a03f41a608f?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

https://www.136.la/shida/show-156230.html

https://zhuanlan.zhihu.com/p/45190801

------------------------

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

上面这行，允许屏幕放大，5倍

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

上面这行，不允许屏幕放大