大众机型
name=”viewport”
<meta name="viewport" content="">
用于控制网页的缩放
content常用的属性有:
- width viewport的宽度[device-width | pixel_value]width如果直接设置pixel_value数值,大部分的安卓手机不支持,但是ios支持;
- height – viewport 的高度 (范围从 223 到 10,000 )
- user-scalable [yes | no]是否允许缩放
- initial-scale [数值] 初始化比例(范围从 > 0 到 10)
- minimum-scale [数值] 允许缩放的最小比例
- maximum-scale [数值] 允许缩放的最大比例
完整实例
<meta name="viewport" content="width=device-width , heigth=device-heigth , user-scalable=no , init-scale=1 . miximum-scale=1 , maximum-scale=1">
http-equiv
<meta http-equiv="X-UA-Compatible" content="IE=edge">
使用最新版本的IE或chrome浏览器
<meta charset="UTF-8">
设置网页字符集
<meta name="description" content="不超过150个字符"/>
<meta name="author" content="xxxx@gamil.com"
<meta name="keywords" content=""/>
<meta name="robots" content="index,follow"/>
SEO优化
<meta name="renderer" content="webkit">
让浏览器采用webkit渲染页面
仅IOS支持
开启对web app支持
<meta name="apple-mobile-web-app-capable" content="yes">
网站开启对web app程序的支持,其实意思就是删除默认的苹果工具栏和菜单栏,开启全屏显示
改变顶部状态条的颜色
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
说明:
- 在 web app 应用下状态条(屏幕顶部条)的颜色;
- 默认值为 default(白色),可以定为 black(黑色)和 black-translucent(灰色半透明);
设置“添加到主屏幕图标
<link rel="apple-touch-icon" href="apple-touch-icon.png">
Safari 浏览器有一个“添加到主屏幕”的功能,用户可以像保存书签一样把一个网站添加到主屏幕,下次用户直接点击主屏幕上的图标就能进入网站。
这个功能不仅方便用户快速访问我们的网站,而且也使我们的 WebApp 更像一个原生应用