移动端常用meta
移动端最常用的
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
- width和height指令分别指定视区的逻辑宽度和高度。他们的值要么是以像素为单位的数字,要么是一个特殊的标记符号。width指令使用device-width标记可以指示视区宽度应为设备的屏幕宽度。类似地height指令使用device-height标记指示视区高度为设备的屏幕高度。
-
user-scalable指令指定用户是否可以缩放视区,即缩放Web页面的视图。值为yes时允许用户进行缩放,值为no时不允许缩放
- maximum-scale和minimum-scale指令用于设置用户对Web页面缩放比例的限制。值的范围为0.25至10.0之间。与initial-scale相同,这些指令的值是应用于视区内容的缩放比例。 所有智能手机浏览器都支持ViewPort 标记的width和user-scalabel指令。但是Opera Mobile不使用user-scalable指令,而是主张用户应始终保留在移动浏览器中缩放Web页面的能力。
苹果手机专用
<meta name="viewport" content="minimal-ui">
在iOS 7.1的Safari中为meta标签新增minimal-ui属性,让网页在加载时便可隐藏顶部的地址栏与底部的导航栏。
<meta name="apple-mobile-web-app-capable" content="yes">
是否启动webapp功能 设置为yes 网站就会在满屏模式full-screen mode删除默认的苹果工具栏和菜单栏
<meta name="apple-touch-fullscreen" content="yes">
开启对web app程序的支持
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no" />
iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号! telephone=no就忽略页面中的数字识别为电话号码 telephone=yes就开启了把数字转化为拨号链接,在默认是情况下就是开启!
<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" />
控制状态栏显示样式 default(白色)black(黑色) black-translucent(灰色半透明)
IE浏览器
避免IE使用兼容模式 :
<meta http-equiv="X-UA-Compatible" content="IE=edge">
微软为IE Mobile版设置的定义宽度标记 浏览器不会自动调整文件的大小,也就是说是固定大小,不会随着浏览器拉伸缩放。:
<meta name="MobileOptimized" content="320">
是否对手持设备友好,只有true或者false :
<meta name="HandheldFriendly" content="true">
QQ浏览器mobile
强制竖屏 :
<meta name="x5-orientation" content="portrait">
强制全屏 :
<meta name="x5-fullscreen" content="true">
应用模式 :
<meta name="x5-page-mode" content="app">
360浏览器
开启极速模式
<meta name="renderer" content="webkit">
UC浏览器
强制竖屏 :
<meta name="screen-orientation" content="portrait">
强制全屏:
<meta name="full-screen" content="yes">
应用模式 :
<meta name="browsermode" content="application">