首页 > 代码库 > html5中viewport与meta详解
html5中viewport与meta详解
网上解释
手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
属性详解：
width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放（一定要禁止)
2、禁止将数字变为电话号码（必须取消这个）：
<meta name="format-detection" content="telephone=no" />
作用：一般情况下，IOS和Android系统都会默认某长度内的数字为电话号码，并且点击这个数字还会自动拨号！即使不加也是会默认显示为电话的。如果是要开启的效果，这个meta就不用写了，默认开启的。
3、iphone设备中的safari私有meta标签：
<meta name="apple-mobile-web-app-capable" content="yes" />
作用：允许全屏模式浏览，删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。
4、iphone的私有标签：
<meta name=”apple-mobile-web-app-status-bar-style” content=”default” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent” />
作用：指定iphone中顶端的状态栏显示样式。默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）
5、创建桌面图标和启动画面，指定它的值可以使得你的网页在保存至主屏时，其图标显示为自定义的icon，而不是网页的缩略图
<link rel="apple-touch-icon" href="/custom_icon.png"/>
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
文件名设置为 apple-touch-icon 或 apple-touch-icon-precomposed ，前者的命名iOS会为这个图标自动添加圆角、阴影和高亮覆盖层，后者则不会添加这些效果。
6、给网页声明启动画面，类似原生app。但是被声明的图片对于iphone和itouch 大小只能是 320 x 460 ，其他大小的都无效。但是可以通过sizes 来进行多设备适配。
<link rel="apple-touch-startup-image" href="/startup.png">
//for iphone Retina Display high
<link rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" />
//for iPad Landscape
<link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" />
//for iPad Portrait
<link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" />
调试：
在浏览器调试+真机测试，
火狐的测试工具：按shift+ctrl+M进行查看。
html5中viewport与meta详解