您的位置:68399皇家赌场 > 服务器租用 > 红米 X 适配手Q H5 页面通用解决方案

红米 X 适配手Q H5 页面通用解决方案

发布时间:2019-09-28 06:06编辑:服务器租用浏览(159)

    魅族 X 适配手Q H5 页面通用建设方案

    2017/11/12 · HTML5 · 8 评论 · iPhone X

    原稿出处: 林焕彬   

    导语: 华为X的出现,一方面前碰到于任何手提式无线电电话机产业的前行极具立异领头羊的功效,另一方面也对现存业务的页面适配带来了新的挑战。 对于手Q中的各工作以来,受金立X影响的H5页面挺多,应该选取什么样飞快有效的秘技来应对啊?

    日前的H5页面能够分成通栏页面和非通栏页面两种,种种页面都恐怕有底部操作栏,具体如下:

    2.web缓和方案

     

    导语: One plusX的面世,一方面前碰着于整个手提式有线电话机行业的腾飞极具创新领头羊的功力,另一方面也对现存职业的页面适配带来了新的挑衅。 对于手Q中的各业务以来,受One plusX影响的H5页面挺多,应该接Nash么样快捷有效的议程来应对啊?

     

    时下的H5页面能够分为通栏页面和非通栏页面三种,每一种页面都大概有尾巴部分操作栏,具体如下:

     

    通栏页面

     

    最上端通栏

     

    或多或少事情的顶级页面大多选择了最上部通栏banner的效应,由于金立X在情形栏扩展了24px的高度,对于当今通栏banner标准的剧情区域会有遮挡情形。

     

    建设方案:对于通栏页面在页面最上端增添一层中度44px的葡萄紫适配层,整个页面往下挪44px。

     

    这种做法就算不相符苹果须要的设计标准,但出于长时间内更新任何banner的资金太高,可以先这么回顾管理,后续再优化banner的宏图表现。

     

    图片 1

     

    banner{

    width:980px;
    height:80px;
    background-color:#ccc;
    margin:0 auto;
    

    }
    /步长980px, 中度300px, 居中体现/

    index.css

    通栏页面

    最上部通栏

    少数事情的拔尖页面很多行使了最上部通栏banner的功效,由于索尼爱立信X在状态栏扩张了24px的惊人,对于当今通栏banner标准的从头到尾的经过区域会有遮挡情形。

    解决方案:对于通栏页面在页面顶端扩充一层高度44px的深藕红适配层,整个页面往下挪44px。

    这种做法尽管不适合苹果供给的设计标准,但鉴于长期内更新任何banner的老本太高,能够先那样简单管理,后续再优化banner的规划表现。

    图片 2

    底部Tab栏/操作栏

    稍加页面使用了尾部Tab栏/操作栏,由于HUAWEIX去掉了底层Home键,代替他是34px中度的Home Indicator ,对于当前的最底层Tab栏/操作栏会促成一定的拦截。

    缓慢解决方案:在页面尾部扩张一层高度34px的适配层,将操作栏上移34px,颜色能够自定义。

    图片 3

    1.终极施工方案(最优,建议选拔)

    topbar{

    width:100%;
    height:30px;
    margin:5px auto;
    background-color:#ccc;
    

    }
    /步长980px, 中度30px, 居中呈现/
    .nav{
    width:980px;
    height:30px;
    background-color:#ceffff;
    margin:0px auto;
    }
    /大幅980px, 中度80px, 居中展现/

    [css] view plain copy

    运用极限方案:

    通过跟终端同学的关系,明确是足以经过极端的主意,针对小米X机型,在原生分界面起先化的时候可挑选是还是不是要加进适配层,那样页面就没有须要样式管理了。

    现实是由此链接中扩充参数来开展适配:

    • 参数名:_wvx 调节索尼爱立信 X适配行为
    • 参数名:_wvxTclr 调节最上端适配层颜色
    • 参数名:_wvxBclr 调整尾部适配层颜色
    _wvx 作用
    1 << 0 (1) 增加顶部适配层,只对透明导航栏风格有效
    1 << 1 (2) 增加底部适配层
    1 << 2 (4) 顶部适配层颜色在主资源加载完成后填充颜色,只对透明导航栏风格有效
    1 << 3 (8) 底部适配层颜色在主资源加载完成后填充颜色

    对于顶端通栏的页面,通过加URL参数来充实最上部中绿适配层。

    图片 4

    对于有底部操作栏(满含通栏和非通栏),通过加UCR-VL参数来扩大尾部适配层以及安装颜色。

    (这里的wvx=10为2和8八个特色数字相加)

    图片 5

    这样,不用写一行代码,只须求给页面链接扩展适配参数,就能够周详适配iPhoneX了~

    此后的尾部优化未来,也得以透过参数配置去掉这几天的最上部灰褐适配层

    越来越多具体才干达成能够查阅这里:

    1 赞 9 收藏 8 评论

    图片 6

    一:本文提供三种减轻方案

    banner{

    width:980px;
    height:80px;
    background-color:#ccc;
    margin:0 auto;
    

    }
    /宽度980px, 高度300px, 居中显得/

     

    使用web方案:

    依据以上的实施方案,能够这么管理:

    1. 修改页面viewport-fit属性
    2. 在H5页面链接三个iphonex.css来给索尼爱立信 X访谈的页面扩展对应的适配层
    3. 在H5页面上给相应的dom结构丰盛适配的类名

    iphonex.css

    @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { /*扩展尾部适配层*/ .has-topbar { height: 100%; box-sizing: border-box; padding-top: 44px; &:before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 44px; background-color: #000000; z-index: 9998; } } /*追加底部适配层*/ .has-bottombar { height: 100%; box-sizing: border-box; padding-bottom: 34px; &:after { content: ''; z-index: 9998; position: fixed; left: 0; bottom: 0; width: 100%; height: 34px; background: #f7f7f8; } } /*导航操作栏上移*/ .bottom-menu-fixed { bottom: 34px; } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    @media only screen and (device-width: 375px) and (device-height: 812px) and
    (-webkit-device-pixel-ratio: 3) {
        /*增加头部适配层*/
        .has-topbar {
            height: 100%;
            box-sizing: border-box;
            padding-top: 44px;
            &:before {
                content: '';
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 44px;
                background-color: #000000;
                z-index: 9998;
            }
        }
     
        /*增加底部适配层*/
        .has-bottombar {
            height: 100%;
            box-sizing: border-box;
            padding-bottom: 34px;
            &:after {
                content: '';
                z-index: 9998;
                position: fixed;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 34px;
                background: #f7f7f8;
            }
        }
     
        /*导航操作栏上移*/
        .bottom-menu-fixed {
            bottom: 34px;
        }
    }

    JavaScript

    <!DOCTYPE HTML> <html class="has-topbar has-bottombar"> <head> <meta charset="utf-8"> <meta name="format-detection" content="telephone=no" /> <meta http-equiv="x-dns-prefetch-control" content="on"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <link rel="stylesheet" type="text/css" href="../../css/index.v6/index.css"> <link rel="stylesheet" href="../../css/index.v6/iphonex.css"> <title>游戏中央</title> </head> <body class="body-index " ontouchstart=""> <ul class="ui-tiled bottom-menu bottom-menu-fixed" > <li class=""> <i class="gc-icon-normal gc-icon-find" ></i> <div class="txt">游戏</div> </li> <li class=""> <i class="gc-icon-normal gc-icon-live" ></i> <div class="txt">直播</div> </li> <li class=""> <i class="gc-icon-normal gc-icon-compete" ></i> <div class="txt">赛事</div> </li> <li class=""> <i class="gc-icon-normal gc-icon-original" ></i> <div class="txt">电子比赛圈</div> </li> <li class="marker"></li> </ul> </body> </html>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    <!DOCTYPE HTML>
    <html class="has-topbar has-bottombar">
    <head>
        <meta charset="utf-8">
        <meta name="format-detection" content="telephone=no" />
        <meta http-equiv="x-dns-prefetch-control" content="on">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <link rel="stylesheet" type="text/css" href="../../css/index.v6/index.css">
        <link rel="stylesheet" href="../../css/index.v6/iphonex.css">
        <title>游戏中心</title>
    </head>
     
    <body class="body-index " ontouchstart="">
    <ul class="ui-tiled bottom-menu bottom-menu-fixed" >
        <li class="">
            <i class="gc-icon-normal gc-icon-find" ></i>
            <div class="txt">游戏</div>
        </li>
         <li class="">
            <i class="gc-icon-normal gc-icon-live" ></i>
            <div class="txt">直播</div>
        </li>
        <li class="">
            <i class="gc-icon-normal gc-icon-compete" ></i>
            <div class="txt">赛事</div>
        </li>
        <li class="">
            <i class="gc-icon-normal gc-icon-original" ></i>
            <div class="txt">电竞圈</div>
        </li>
        <li class="marker"></li>
    </ul>
    </body>
    </html>

    如上,那样做的难点是,要修改的页面非常多,并且给页面带来了附加的类名,对以往的样式移除也可能有早晚的工作量。

    既然如此使用web的艺术来消除那一个标题不是很完美,是不是能够通过终端的情势给webview增添适配层,进而缓慢解决那个主题素材吧?

                      底部Tab栏/操作栏

     

    稍稍页面使用了底层Tab栏/操作栏,由于中兴X去掉了后面部分Home键,替代它是34px高度的Home Indicator ,对于近期的底层Tab栏/操作栏会招致一定的拦截。

     

    焚薮而田方案:在页面尾巴部分扩大一层中度34px的适配层,将操作栏上移34px,颜色能够自定义。

     

    图片 7

     

     

    非通栏页面

     

    底部Tab栏/操作栏

     

    缘由同上,在底层有34px中度的Home Indicator ,对于当前的最底层Tab栏/操作栏会促成一定的阻止操作。

     

    消除方案:在页面尾巴部分增加一层低度34px的颜色块,将操作栏上移34px,颜色能够自定义。

     

    图片 8图片 9

     

     

    有关安全区域

     

    此间大概有人会有疑点,为何非通栏下的页面内容是通到尾部的,而按键却是在安全区域上方呢?

     

    其一主题素材关系到平安区域,iOS11 和在此以前版本的分裂之处在于,webview 相比重申安全区域了。那代表,倘使给页面成分设置 top: 0, 它会渲染在荧屏顶端的44px之下,也便是情形栏上边。若是给页面元素设置 bottom: 0, 它会渲染在显示器底边的34px之上,也正是底层安全区域方面。

     图片 10

     

    图片 11

     

    为了缓和这么些两难的动静,苹果公司给大家提供了贰个安装viewport的meta标签的技术方案。

     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

    viewport 能够安装的选项便是 viewport-fit,它有八个可选值:

     

    • contain: The viewport should fully contain the web content. 可视窗口完全富含网页内容

    • cover: The web content should fully cover the viewport. 网页内容完全覆盖可视窗口

    • auto: The default value, 同contain的作用

     

    经过给页面设置viewport-fit=cover,能够将页面包车型客车布局区域延伸到页面顶上部分和尾巴部分。

     

    图片 12图片 13

     

     

    对此通栏页面,设置了viewport-fit的习性,发掘会不见效,经过跟同事查看手Q源码后意识,终端对于WebView通栏的情事设置了UIScrollViewContentInsetAdjustmentNever属性,去除了上下安全区域的边距,使得安全区域的内外边距失效了。

     

    除此以外提一点,经过2个版本的webview测验,开采WKWebView在渲染页面包车型客车时候,后面部分开关在地方展现上不平等,也许是一个还未减轻的bug:

     图片 14

     

    图片 15

     

    使用web方案:

     

    依靠上述的设计方案,能够这样处理:

     

    1. 修改页面viewport-fit属性

    2. 在H5页面链接二个iphonex.css来给三星 X访谈的页面扩充对应的适配层

    3. 在H5页面上给相应的dom结构丰裕适配的类名

     

    iphonex.css

     

    @media only screen and class="Apple-converted-space"> (device-width: class="Apple-converted-space"> 375px) class="Apple-converted-space"> and class="Apple-converted-space"> (device-height: class="Apple-converted-space"> 812px) class="Apple-converted-space"> and

    (-webkit-device-pixel-ratio: class="Apple-converted-space"> 3) class="Apple-converted-space"> {

        /*扩张尾部适配层*/

        .has-topbar {

            height: 100%;

            box-sizing: class="Apple-converted-space"> border-box;

            padding-top: 44px;

            &:before {

                content: '';

                position: class="Apple-converted-space"> fixed;

                top: 0;

                left: 0;

                width: 100%;

                height: 44px;

                background-color: class="Apple-converted-space"> #000000;

                z-index: 9998;

            }

        }

     

        /*追加尾巴部分适配层*/

        .has-bottombar {

            height: 100%;

            box-sizing: class="Apple-converted-space"> border-box;

            padding-bottom: class="Apple-converted-space"> 34px;

            &:after {

                content: '';

                z-index: 9998;

                position: class="Apple-converted-space"> fixed;

                left: 0;

                bottom: 0;

                width: 100%;

                height: 34px;

                background: class="Apple-converted-space"> #f7f7f8;

            }

        }

     

        /*导航操作栏上移*/

        .bottom-menu-fixed {

            bottom: 34px;

        }

    }

     

    <!DOCTYPE HTML>

    <html class="has-topbar has-bottombar">

    <head>

        <meta charset="utf-8">

        <meta class="Apple-converted-space"> name="format-detection" class="Apple-converted-space"> content="telephone=no" class="Apple-converted-space"> />

        <meta http-equiv="x-dns-prefetch-control" class="Apple-converted-space"> content="on">

        <meta name="viewport" class="Apple-converted-space"> content="width=device-width,initial-scale=1.0,user-scalable=no" class="Apple-converted-space"> />

        <meta class="Apple-converted-space"> name="apple-mobile-web-app-capable" class="Apple-converted-space"> content="yes" class="Apple-converted-space"> />

        <meta class="Apple-converted-space"> name="apple-mobile-web-app-status-bar-style" class="Apple-converted-space"> content="black" class="Apple-converted-space"> />

        <link rel="stylesheet" class="Apple-converted-space"> type="text/css" class="Apple-converted-space"> href="../../css/index.v6/index.css">

        <link rel="stylesheet" class="Apple-converted-space"> href="../../css/index.v6/iphonex.css">

        <title>游戏主题</title>

    </head>

     

    <body class="body-index " ontouchstart="">

    <ul class="ui-tiled bottom-menu bottom-menu-fixed" >

        <li class="">

            <i class="gc-icon-normal gc-icon-find" ></i>

            <div class="Apple-converted-space"> class="txt">游戏</div>

        </li>

         <li class="">

            <i class="gc-icon-normal gc-icon-live" ></i>

            <div class="Apple-converted-space"> class="txt">直播</div>

        </li>

        <li class="">

            <i class="gc-icon-normal gc-icon-compete" ></i>

            <div class="Apple-converted-space"> class="txt">赛事</div>

        </li>

        <li class="">

            <i class="gc-icon-normal gc-icon-original" ></i>

            <div class="Apple-converted-space"> class="txt">电竞圈</div>

        </li>

        <li class="Apple-converted-space"> class="marker"></li>

    </ul>

    </body>

    </html>

     

    如上,那样做的难点是,要修改的页面比相当多,并且给页面带来了附加的类名,对之后的样式移除也可能有一定的工作量。

     

    既然如此使用web的方法来缓和那几个主题素材不是很完善,是或不是足以透过终点的办法给webview扩张适配层,进而化解这些难题啊?

     

    应用终端方案:

     

    因而跟终端同学的调换,明确是能够通过极端的办法,针对魅族X机型,在原生分界面最初化的时候可挑选是还是不是要追加适配层,那样页面就无需样式管理了。

     

    实际是透过链接中加进参数来进展适配:

     

    图片 16图片 17

     

     

    对此顶上部分通栏的页面,通过加U奇骏L参数来扩大最上部淡红适配层。

     

    图片 18图片 19

     

     

    对此有尾巴部分操作栏(饱含通栏和非通栏),通过加U昂CoraL参数来扩张尾巴部分适配层以及安装颜色。

     

    (这里的wvx=10为2和8多少个性情数字相加)

     

    图片 20

     

     

    那般,不须求写一行代码,只供给给页面链接扩充适配参数,就能够健全适配iPhoneX了~

     

    事后的头顶优化现在,也得以透过参数配置去掉近来的顶上部分深紫适配层

     

    越来越多具体技艺达成能够查阅这里:

     

     

    三列布局

    效果图:

    图片 21

    三列布局.jpg

    源代码:
    <code>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
    <html xmlns=";
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>三列布局</title>
    <style type="text/css">
    /上升的幅度980px, 中度50px, 居中体现/

    [html] view plain copy

    有关安全区域

    此间恐怕有人会有疑难,为何非通栏下的页面内容是通到底部的,而按键却是在长治区域上方呢?

    本条难题关系到安全区域,iOS11 和以前版本的分歧之处在于,webview 比较讲究安全区域了。那代表,借使给页面成分设置 top: 0, 它会渲染在荧屏顶端的44px之下,约等于意况栏下边。若是给页面元素设置 bottom: 0, 它会渲染在显示器底边的34px之上,也正是底层安全区域方面。
    图片 22

    为了化解那几个不尴不尬的情状,苹果公司给我们提供了三个安装viewport的meta标签的实施方案。

    viewport 能够设置的选项正是 viewport-fit,它有四个可选值:

    • contain: The viewport should fully contain the web content. 可视窗口完全包括网页内容
    • cover: The web content should fully cover the viewport. 网页内容完全覆盖可视窗口
    • auto: The default value, 同contain的作用

    通过给页面设置viewport-fit=cover,能够将页面包车型大巴布局区域延伸到页面顶端和尾巴部分。

    图片 23

    对此通栏页面,设置了viewport-fit的习性,发现会不见效,经过跟同事查看手Q源码后发掘,终端对于WebView通栏的景色设置了UIScrollViewContentInsetAdjustmentNever属性,去除了上下安全区域的边距,使得安全区域的前前面距失效了。

    除此以外提一点,经过2个版本的webview测量试验,开掘WKWebView在渲染页面的时候,尾巴部分开关在职位表现上不等同,或许是四个还未缓慢解决的bug:

    图片 24

    footer{

    width:980px;
    height:120px;
    background-color:#ccc;
    margin:0 auto;
    

    }
    </style>
    </head>

    <body>
    <div id="top">头部</div>
    <div id="nav">导航栏</div>
    <div id="banner">焦点图</div>
    <div id="content">
    <div class="content_left">内容左部分</div>
    <div class="content_right">内容右部分</div>
    </div>
    <div id="footer">页面底部</div>
    </body>
    </html>

    </code>

     

    非通栏页面

    底部Tab栏/操作栏

    由来同上,在后面部分有34px中度的Home Indicator ,对于当下的平底Tab栏/操作栏会导致一定的阻挠操作。

    缓和方案:在页面尾巴部分扩大一层中度34px的颜色块,将操作栏上移34px,颜色能够自定义。

    图片 25

    nav{

    width:980px;
    height:30px;
    background-color:#ccc;
    margin:5px auto;
    

    }
    /升幅980px, 中度80px, 居中显示/

     

    content{

    width:980px;
    height:300px;
    margin:5px auto;
    /*清除子元素浮动对父元素造成的影响*/
    overflow:hidden;    
    

    }
    /左侧部分左浮动/
    .content_left{
    width:350px;
    height:300px;
    background-color:#ccc;
    float:left;
    }
    /左侧部分右浮动/
    .content_right{
    width:625px;
    height:300px;
    background-color:#ccc;
    float:right;
    }
    /上涨的幅度980px, 中度120px, 居中呈现/

    index.css

    本文由68399皇家赌场发布于服务器租用,转载请注明出处:红米 X 适配手Q H5 页面通用解决方案

    关键词: 68399皇家赌场 HTML5 前端 js 前端开发

上一篇:后面一个优化,web前端优化

下一篇:没有了