·您当前的位置:首页 > 技术教程 > Html5技术 >

[html5]浏览器及平台详细说明

时间:2017-11-23 16:10酷播
[html5]浏览器及平台详细说明

QQ 浏览器(X5 内核)

QQ 浏览器(X5 内核)同样适用于微信,QQ等第三方应用页面开发。

html 代码:
  1. <!-- 设置锁定横屏、竖屏显示模式,portrait(横屏),landscape(竖屏)-->
  2. <meta name="x5-orientation" content="portrait|landscape">
  3. <!-- 设置全屏显示页面 -->
  4. <meta name="x5-fullscreen" content="true">
  5. <!-- 开启页面以应用模式显示(全屏显示等) -->
  6. <meta name="x5-page-mode" content="app">

360浏览器

设置 360 浏览器渲染模式:webkit 为极速内核,ie-comp 为 IE 兼容内核,ie-stand 为 IE 标准内核。

html 代码:
  1. <meta name="renderer" content="webkit|ie-comp|ie-stand">

详情文档链接:浏览器内核控制Meta标签说明文档
360 浏览器就会在读取到这个标签后,立即切换对应的极速核。 另外为了保险起见再加入

html 代码:
  1. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

这样写可以达到的效果是如果安装了 Google Chrome Frame,则使用 GCF 来渲染页面,如果没有安装 GCF,则使用最高版本的 IE 内核进行渲染。

UC 浏览器

设置屏幕方向

portrait 为横屏,landscape 为竖屏。

html 代码:
  1. <meta name="screen-orientation" content="portrait|landscape">

设置全屏

html 代码:
  1. <meta name="full-screen" content="yes">

设置适应屏幕排版(缩放是否显示滚动条)

UC 浏览器在标准排版效果实现的基础上,提供适应屏幕的排版方式,当设置为 uc-fitscreen=yes,页面进行缩放操作时,仅放大图片和文字等元素,但不放大屏幕宽度,保持不出现水平(横向)滚动条。

html 代码:
  1. <meta name="viewport" content="uc-fitscreen=no|yes">

排版模式

UC 浏览器提供两种排版模式,分别是适屏模式(fitscreen)及标准模式(standard),其中适屏模式简化了一些页面的处理,使得页面内容更适合进行页面阅读、节省流量及响应更快,而标准模式则能按照标准规范对页面进行排版及渲染。

html 代码:
  1. <meta name="layoutmode" content="fitscreen|standard">

夜间模式

可以帮助用户在低亮度或黑暗情况下更舒适的进行页面浏览。由于基于网页的应用愈加复杂,由浏览器实现的单一夜间模式不一定能够适应所有情况(例如游戏应用),因此 UC 浏览器允许网页设计者对其设计的页面禁用浏览器的夜间模式,自行设计更适合用户使用的夜间模式。

注意:页面内的 frame/iframe 中的夜间模式的 meta 不生效。

html 代码:
  1. <meta name="nightmode" content="enable|disable">

整页图片强制显示

为了节省流量及加快速度,UC 为用户提供了无图模式,在实际使用中存在页面中的图片是不可缺少的,例如验证码,地图等。通过强制图片显示的功能可以保证图片显示不受用户的设置影响。

**注意:整页图片强制显示仅对当前页面生效,对页面内的 frame/iframe 不生效,也不影响前进后退的页面

html 代码:
  1. <meta name="imagemode" content="force">

开启应用模式

html 代码:
  1. <meta name="browsermode" content="application">

应用模式是为方便 Web 应用及游戏开发者设置的综合开关,通过meta标签进行指示打开,当进入应用模式时,浏览器将自动调整以下参数:

参数 状态 说明
全屏 生效 可通过 meta 或 JS API 调用退出全屏
长按菜单 失效 可通过 JS API 调用重新生效
浏览器默认手势 失效 可通过 JS API 调用重新生效
排版模式 标准模式 可通过 meta 或 JS API 调用设置其他排版模式
强制图片显示 生效 /
夜间模式 失效 可通过 meta 或 JS API 调用启用夜间模式

缩放字体

例如:禁用的 UC 浏览器的字体缩放功能

html 代码:
  1. <meta name="wap-font-scale" content="no">

具体UC 浏览器文档链接:UC 浏览器文档

Apple iOS原生浏览器

添加智能 App 广告条

告诉浏览器这个网站对应的app,并在页面上显示下载banner,需要注意的是Smart App Banners标签不能用在frame框架内部,否则不起作用。

其中app-id(必须), affiliate-data (可选), app-argument (可选)

html 代码:
  1. <meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">

例如Digg的写法:

html 代码:
  1. <meta name="apple-itunes-app" content="app-id=362872995, affiliate-data=bevbOqLt02I, app-argument=digg://">

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

html 代码:
  1. <meta name="format-detection" content="telephone=no">

启用 WebApp 全屏模式

html 代码:
  1. <meta name="apple-mobile-web-app-capable" content="yes">
添加到主屏后设置状态栏的背景颜色
html 代码:
  1. <meta name="apple-mobile-web-app-status-bar-style" content="black">

只有在 “apple-mobile-web-app-capable” content=”yes” 时生效。

  • 如果设置为 default 或 black ,网页内容从状态栏底部开始。
  • 如果设置为 black-translucent ,网页内容充满整个屏幕,顶部会被状态栏遮挡。
添加到主屏后的标题(iOS 6 新增)
html 代码:
  1. <meta name="apple-mobile-web-app-title" content="App Title">

iOS 图标

图片自动处理成圆角和高光等效果。

html 代码:
  1. <link rel="apple-touch-icon" href="path/to/apple-touch-icon.png">

禁止系统自动添加效果,直接显示设计原图。

html 代码:
  1. <link rel="apple-touch-icon-precomposed" href="path/to/apple-touch-icon-precomposed.png">

iOS 8+ 不再支持 precomposed, 只有 apple-touch-icon 是必须的
在大多数情况下,在head中一个180×180px的图标就足够了。如果您想要由设备确定的唯一图标,请使用不同大小的图标。

html 代码:
  1. <link rel="apple-touch-icon" sizes="57x57" href="path/to/icon@57.png">
  2. <link rel="apple-touch-icon" sizes="72x72" href="path/to/icon@72.png">
  3. <link rel="apple-touch-icon" sizes="114x114" href="path/to/icon@114.png">
  4. <link rel="apple-touch-icon" sizes="144x144" href="path/to/icon@144.png">

启动画面 ( 不赞成使用 )

iPad 的启动画面是不包括状态栏区域的,iPhone 和 iPod touch 的启动画面是包含状态栏区域的

html 代码:
  1. <link rel="apple-touch-startup-image" href="path/to/startup.png">

具体描述设置请查看http://www.css88.com/archives/5480中相应的说明。

iOS 应用深度链接

html 代码:
  1. <meta name="apple-itunes-app" content="app-id=APP-ID, app-argument=http/url-sample.com">
  2. <link rel="alternate" href="ios-app://APP-ID/http/url-sample.com">

Google Android原生浏览器

标签页选项卡颜色

Android Lollipop 中的 Chrome 39 增加 theme-color meta 标签,用来控制选项卡颜色。

http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android

68747470733a2f2f646576656c6f706572732e676f6f676c652e636f6d2f7765622f757064617465732f696d616765732f323031342f31312f7468656d652d636f6c6f722d73732e706e67

html 代码:
  1. <meta name="theme-color" content="#db5945">

添加到主屏

html 代码:
  1. <!-- 添加到主屏 -->
  2. <meta name="mobile-web-app-capable" content="yes">

详细链接: https://developer.chrome.com/multidevice/android/installtohomescreen

安卓应用深度链接(网页上唤起应用)

html 代码:
  1. <!-- Android app deep linking -->
  2. <meta name="google-play-app" content="app-id=package-name">
  3. <link rel="alternate" href="android-app://package-name/http/url-sample.com">

注:貌似没测试成功,如果你知道如何正确设置,欢迎留言斧正。

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器