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

目录
[隐藏]

让手机上易于浏览阅读,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 后被移除了。
Name Value Description
width 正整数或device-width 定义视口的宽度,单位为像素
height 正整数或device-height 定义视口的高度,单位为像素
initial-scale [0.0-10.0] 定义初始缩放值
minimum-scale [0.0-10.0] 定义缩小最小比例,它必须小于或等于maximum-scale设置
maximum-scale [0.0-10.0] 定义放大最大比例,它必须大于或等于minimum-scale设置
user-scalable yes/no 定义是否允许用户手动缩放页面,默认值yes

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

如果希望你的站点/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”>

点赞 (2)

发表评论

电子邮件地址不会被公开。 必填项已用*标注