【WebApp开发必知】移动游览器私有Meta属性

2018-7-3 22:46| 发布者: 蚂蚁大喇叭| 查看: 1388| 评论: 3

摘要: Meta属性在移动端可以说是不得不知道的使用得非常频繁的技术。下面就给大家整理一下在移动端的各大浏览器一些私有的Meta属性。
本站源码等资源来源于社区网友上传、网络等。仅供学习交流和研究使用,请勿商用。如有侵犯您的版权,请联系我们,本站将立即删除,联系QQ:791577401。
Meta属性在移动端可以说是不得不知道的使用得非常频繁的技术。下面就给大家整理一下在移动端的各大浏览器一些私有的Meta属性。


一、Safari浏览器私有 Meta 属性

<!-- 强制显示方式 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<!-- 允许全屏模式浏览 -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- 定义safari顶端状态条的样式 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<!-- 开启WEB APP 支持 -->
<meta name="apple-touch-fullscreen" content="yes">

<!-- WEB APP名称 -->
<meta name="apple-mobile-web-app-title" content="APP名">

<!-- 隐藏顶部 -->
<meta name="viewport" content="minimal-ui">

1.让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览;

2.在ios上,用户将网页添加到主屏后,再从主屏幕打开这个网页,可以隐藏浏览器的地址栏和下面的toolbar;

3.其值有三个: default(白色)black(黑色) black-translucent(灰色半透明)。

4.开启对web app程序的支持

5.是指在发送到屏幕的时候默认的命名。

6.让网页在加载时便可隐藏顶部的地址栏与底部的导航栏。

二、QQ浏览器私有 Meta 属性(x5内核定制标签)

<!-- 设置屏幕方向 -->
<meta name="x5-orientation" content="portrait|landscape" />

<!-- 设置全屏 -->
<meta name="x5-fullscreen" content="true" />

<!-- 设置屏幕模式 -->
<meta name="x5-page-mode" content="app" />

三、UC浏览器私有 Meta 属性

<!-- 横屏、竖屏显示 -->
<meta name="screen-orientation" content="portrait|landscape">

<!-- 设置是否全屏 -->
<meta name="full-screen" content="yes">

<!-- 缩放不出滚动条 -->
<meta name="viewport" content="uc-fitscreen=no|yes"/>

<!-- 排版 -->
<meta name="layoutmode" content="fitscreen|standard" />

<!-- 夜间模式 -->
<meta name="nightmode" content="enable|disable"/>

<!-- 应用模式 -->
<meta name="browsermode" content="application"/>

<!-- 强制图片显示 -->
<meta name="imagemode" content="force"/>

1.设置屏幕方向为横屏还是竖屏portrait为横屏 | landscapeo为坚屏。

2.是否全屏,yes表示强制浏览器全屏,no则反之。

3.缩放不出滚动条。设置no后用户缩放与标准浏览器缩放一直,设置为yes后,用户缩放金放到图片和文字,不出现横向滚动条。

4.排版,fitscreen模式简化页面处理,适合页面阅读节省流量,standard模式和标准浏览器一致;一旦设置layoutmode meta后,用户使用浏览器提供的的排版模式选项将会无效。

5.nightmode的值设置为disable后,浏览器的夜间模式就不起作用。

6.UC 浏览器为了节省流量,为用户提供了无图模式。不过我们可以通过这个属性来强制浏览器显示图片,而有时候为了提高用户体验,无图模式还是有必要的,对于有些 图片是不得不显示的,如:验证码,我们也可以单独设置其为显示模式,其他图片可根据用户的设置来进行弹性选择。代码如下:

<img src="./path/demo.jpg" show="force">

7.使用了application这种应用模式后,页面讲默认全屏,禁止长按菜单,禁止收拾,标准排版,以及强制图片显示。

Meta属性就介绍到这里,这是移动互联网的时代,随着HTML5时代的到来,各大浏览器对HTML5的支持也有了很大的飞越,对于我们来说移动就是未来,就是未来我们大显神威的好地方。各位拉好你的秋裤,让我们一起来拥抱现在的以及未来的移动世界吧!

四、360浏览器私有 Meta 属性

<meta name="renderer" content="webkit">
<!-- 开启极速模式 -->

五、其它常用的Meta属性

<!-- 禁止百度转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />

<!-- 开启短信功能 -->
<a href="sms:123456">123456</a>

<!-- 优先使用最新版本 IE 和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

扫描关注蚂蚁HTML5社区官方微信

无语

惊吓

期待

很赞

差劲

相关阅读

发表评论

最新评论

引用 YABN456 2019-4-20 00:07
66666666666
引用 Leader755 2019-4-1 14:43
66666666666
引用 Leader755 2019-4-1 14:42
66666666666

查看全部评论(3)

热门教程

【教程下载】HTML5移动应用开发入门经典
【教程下载】HTML5移动应用开发入门经典
【HTML5开发教程下载】HTML5移动应用开发入门经典,总共24章,每章一个小时学习时间,
【教程下载】HTML5与CSS3权威指南
【教程下载】HTML5与CSS3权威指南
《HTML 5与CSS 3权威指南》内容系统而全面,详尽地讲解了html 5和css 3的所有新功能和
【教程下载】HTML5游戏开发(全)
【教程下载】HTML5游戏开发(全)
【HTML5游戏开发(全)】本书分为9章。 学习如何绘制游戏对象、绘制动画、加入音频等
关闭

网站推荐上一条 /1 下一条



邮箱:[email protected] QQ:791577401 蚂蚁开源 版权所有

© MUZINIU Inc.小黑屋|手机版|Archiver|Zzfriend

Powered by MuZiNiuX3.2( 豫ICP备12017936号 )

 豫公网安备 41078102000103号

返回顶部