欢迎访问晨星博客!

  • 当前位置: 首页 Web前端 正文

    移动端网站开发之浏览器私有Meta属性

    文章目录
    1. 主流浏览器
    2. UC浏览器私有属性
    3. QQ浏览器私有属性

    近两年移动端开发越来越重要了,作为一名前端攻城狮必须要了解一下当前主流的移动浏览器的一些熟悉和接口,方便我们在开发的时候可以更加便捷和实现更优秀的功能。今天我就拿当前最主流的两款移动端浏览器给分享一下私有Meta属性的作用和应用场景。

    既然话题撂这里了,那肯定有人问,我学习这些有什么用呢?

    针对这个问题,我只想说一句,想不想你的网站在浏览器上像APP一样打开,想不想让你的移动网站以最合理的方式呈现到用户眼前,如果你考虑过这些,那么今天的话题就有继续下去的理由啦!

    主流浏览器

    1、UC浏览器wekit内核

    这个作为移动端浏览器的排头兵我想很多人都不陌生,而且这款浏览器也非常的好用,用户也非常喜欢,我们做开发的时候不可能照顾到所有因为市场上的应用实在是太多了,鱼龙混杂一点也不为过,所以我们只要熟悉一下比较主流的就OK了。

    2、QQ浏览器x5内核

    腾讯QQ作为当前最主流的聊天交友工具,他的市场也不能被我们忽略,特别是当前微信朋友圈横向,而且QQ空间也是我们流量的一大来源,所有我们也把QQ的X5内核浏览器作为我们今天的目标。

    UC浏览器私有属性

    从UC的官方开发文档中我们可以了解到,我们用官方提供给我们的接口和属性可以让我们的网站实现全屏、禁用夜间模式、控制屏幕方向、控制缩放以及禁用无图模式等一系列的功能。

    1. //设置屏幕方向为横屏还是竖屏
    2. <meta name=“screen-orientation” content=“portrait|landscape”>
    3. //设置是否全屏,yes表示强制浏览器全屏
    4. <meta name=“full-screen” content=“yes”>
    5. //缩放不出滚动条,设置为yes后不出现横向滚动条。
    6. <meta name=“viewport” content=“uc-fitscreen=no|yes”/>
    7. //夜间模式disable为禁用夜间模式
    8. <meta name=“nightmode” content=“enable|disable”/>
    9. //禁用UC浏览器的无图模式
    10. <meta name=“imagemode” content=“force”/>
    11. //app模式,使用了application这种应用模式后,页面讲默认全屏,禁止长按菜单,禁止收拾,标准排版,以及强制图片显示。
    12. <meta name=“browsermode” content=“application”/>
    关于UC浏览器我就给大家枚举到这里,这些是我们应该比较常用的一些熟悉,官方文档中还有一些,如果您有特殊需求还是多去了解一下官方文档吧!

    QQ浏览器私有属性

    QQ浏览器给我我们提供的接口比较少,但是呢我们需要用到的一些功能还是可以实现的,下面我就挑几个比较实用的给大家列举出来。

    1. //设置屏幕方向为横屏还是竖屏
    2. <meta name=“x5-orientation” content=“portrait|landscape” />
    3. //设置是否全屏,yes表示强制浏览器全屏
    4. <meta name=“x5-fullscreen” content=“true” />
    5. //app模式
    6. <meta name=“x5-page-mode” content=“app” />
    怎么样学习到了这几招,以后再开发移动端是不是可以更我们的UI更人性化了,喜欢的话就赶紧收藏吧。

    声明:原创文章请勿转载,如需转载请注明出处!

    • 共 2 条评论

    请登陆后再发表您的观点吧!

    最新评论

    1. 小飞鱼

      以后是移动的天下了

    2. 周晓龙

      确实是这样子的,移动端比pc端显得越来越重要了,如果一个网站不支持移动端的话,那么可以说那个网站注定将会被淘汰。对于我来说,我是非常注重移动端的。

    账号登陆

    快捷登陆