移动设备(手机)上浏览器全屏隐藏工具栏和菜单栏的设置

让手机上易于浏览阅读，meta viewport 必不可少。作为一款 webApp，你可能更希望默认为全屏模式。

meta viewport 写法与相关参数

meta viewport 写法与相关参数如下。

<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 viewport 宽度(数值<200-10000>/device-width)
height viewport 高度(数值<233-10000>/device-height)
initial-scale 初始缩放比例(0-10)
maximum-scale 允许用户最大缩放比例
minimum-scale 允许用户最小缩放比例
user-scalable 是否允许用户缩放(yes/no)
minimal-ui iOS 7.1 beta 2 中新增属性，可以在页面加载时最小化上下状态栏。这是一个布尔值。但该参数在 IOS 8 后被移除了。

移动设备上浏览器全屏/应用模式

如果希望你的站点/webApp 在手机上展示为全屏模式，下面一些参数可以参考。

1、Safari 7.x 全屏模式(minimal-ui)：

删除默认的苹果工具栏和菜单栏
<meta name=”apple-mobile-web-app-capable” content=”yes” />

2、隐藏状态栏/设置状态栏颜色：

<meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent” />

3、safri 添加到主屏界面的显示标题：

<meta name=”apple-mobile-web-app-title” content=”应用标题”>

4、忽略自动识别数字为电话号码：

<meta content=”telephone=no” name=”format-detection” />

5、忽略自动识别邮箱账号：

<meta content=”email=no” name=”format-detection” />

6、常用浏览器全屏设置：

<!– UC强制竖屏 –>
<meta name=”screen-orientation” content=”portrait”>

<!– UC强制全屏 –>
<meta name=”full-screen” content=”yes”>

<!– UC应用模式 –>
<meta name=”browsermode” content=”application”>

<!– QQ强制竖屏 –>
<meta name=”x5-orientation” content=”portrait”>

<!– QQ强制全屏 –>
<meta name=”x5-fullscreen” content=”true”>

<!– QQ应用模式 –>
<meta name=”x5-page-mode” content=”app”>

<!– 针对一些不识别 viewport 的浏览器 –>
<meta name=”HandheldFriendly” content=”true”>
<!– 微软的老式浏览器 –>
<meta name=”MobileOptimized” content=”320″>

设置示例参考

<meta content=”width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui” name=”viewport” >
<meta name=”apple-mobile-web-app-title” content=”志文工作室” />
<meta name=”apple-mobile-web-app-capable” content=”yes” />
<meta content=”telephone=no” name=”format-detection” />
<!– UC强制全屏 –>
<meta name=”full-screen” content=”yes”>
<!– QQ强制全屏 –>
<meta name=”x5-fullscreen” content=”true”>
<!– UC应用模式 –>
<meta name=”browsermode” content=”application”>
<!– QQ应用模式 –>
<meta name=”x5-page-mode” content=”app”>