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

[html5]移动端跨平台分析全面介绍国内浏览器情况适合做

时间:2016-12-28 17:48酷播
[html5]全面介绍国内浏览器情况适合做跨平台分析,[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 代码: 来源:www.cuplayer.com
  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 代码: 来源:www.cuplayer.com
  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

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">

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

Apple Safari 浏览器

Safari 10开始支持固定书签页的SVG favicons了,你可以这样使用:

html 代码:
  1. <!-- Pinned Site -->
  2. <link rel="mask-icon" href="path/to/icon.svg" color="red">

类似的效果

扩展阅读:https://yoast.com/dev-blog/safari-pinned-tab-icon-mask-icon/

Google Chrome浏览器

关闭chrome浏览器下翻译插件

有些时候感觉chrome浏览器下翻译插件很烦人,可以通过下面的代码禁用它。

html 代码: 来源:www.cuplayer.com
  1. <meta name="google" value="notranslate" />

chrome浏览器插件安装

有时候,你需要在你的页面上点击某个安卓,直接安卓你的chrome浏览器插件,而不是链接到Chrome webstore 的详细地址再安装,那么你可以使用:

html 代码:
  1. <link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID">

具体使用,请查看:Using Inline Installation

Google Chrome Mobile (只针对 Android)

从 Chrome 31 开始,你可以设置你的 Web 应用为“app mode”,如 Safari。

html 代码:
  1. <!-- 链接到一个 manifest 并定义 manifest 的元数据。-->
  2. <!-- manifest.json 中的例子也可以通过以下链接找到。-->
  3. <link rel="manifest" href="manifest.json">
  4.  
  5. <!-- 定义你的网页为 Web 应用 -->
  6. <meta name="mobile-web-app-capable" content="yes">
  7.  
  8. <!-- 第一个是官方推荐格式。-->
  9. <link rel="icon" sizes="192x192" href="nice-highres.png">
  10. <link rel="icon" sizes="128x128" href="niceicon.png">
  11. <!-- 所有带 apple 前缀的格式已废弃,所以不要使用它们。-->
  12. <link rel="apple-touch-icon" sizes="128x128" href="niceicon.png">
  13. <link rel="apple-touch-icon-precomposed" sizes="128x128" href="niceicon.png">

Internet Explorer浏览器

模式设置

js 代码: 来源:www.cuplayer.com
  1. //IE8以下以IE7标准模式呈现网页,而IE9则以IE9的标准模式呈现网页:
  2. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
  3. //如果安装了GCF,则使用GCF来渲染页面("chrome=1"),
  4. //如果没有安装GCF,则使用最高版本的IE内核进行渲染("IE=edge")
  5. <meta http-equiv="x-ua-compatible" content="ie=edge">

GCF(Google Chrome Frame )相关链接:https://www.chromium.org/developers/how-tos/chrome-frame-getting-started

X-UA-Compatible相关链接:https://blogs.msdn.microsoft.com/ie/2010/06/16/ies-compatibility-features-for-site-developers/

win8,win10下的一些设置

html 代码:
  1. <meta http-equiv="cleartype" content="on">
  2. <meta name="skype_toolbar" content="skype_toolbar_parser_compatible">
  3.  
  4. <!--
  5. Disable link highlighting on IE 10 on Windows Phone
  6. 具体说明查看:https://blogs.windows.com/buildingapps/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10/-->
  7. <meta name="msapplication-tap-highlight" content="no">
  8.  
  9. <!--
  10. Pinned sites
  11. 具体说明查看:https://msdn.microsoft.com/en-us/library/dn255024(v=vs.85).aspx-->
  12. <meta name="application-name" content="Contoso Pinned Site Caption">
  13. <meta name="msapplication-tooltip" content="Example Tooltip Text">
  14. <meta name="msapplication-starturl" content="/">
  15.  
  16. <meta name="msapplication-config" content="http://example.com/browserconfig.xml">
  17.  
  18. <meta name="msapplication-allowDomainApiCalls" content="true">
  19. <meta name="msapplication-allowDomainMetaTags" content="true">
  20. <meta name="msapplication-badge" content="frequency=30; polling-uri=http://example.com/id45453245/polling.xml">
  21. <meta name="msapplication-navbutton-color" content="#FF3300">
  22. <meta name="msapplication-notification" content="frequency=60;polling-uri=http://example.com/livetile">
  23. <meta name="msapplication-square150x150logo" content="path/to/logo.png">
  24. <meta name="msapplication-square310x310logo" content="path/to/largelogo.png">
  25. <meta name="msapplication-square70x70logo" content="path/to/tinylogo.png">
  26. <meta name="msapplication-wide310x150logo" content="path/to/widelogo.png">
  27. <meta name="msapplication-task" content="name=Check Order Status;action-uri=./orderStatus.aspx?src=IE9;icon-uri=./favicon.ico">
  28. <meta name="msapplication-task-separator" content="1">
  29. //Windows 8 磁贴颜色
  30. <meta name="msapplication-TileColor" content="#FF3300">
  31. //Windows 8 磁贴图标
  32. <meta name="msapplication-TileImage" content="path/to/tileimage.jpg">
  33. <meta name="msapplication-window" content="width=1024;height=768">

 

热门文章推荐

请稍候...

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

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