扫描二维码,下载安卓APP
下载安卓APP箭头
客服QQ
箭头给我发消息

客服QQ:2698585038
论坛 >移动开发 >iPhone X 适配手Q H5 页面通用解决方案 (2)

iPhone X 适配手Q H5 页面通用解决方案 (2)

qsl发布于 2017-11-16 09:41查看:8052回复:1

     使用web方案:

        根据以上的设计方案,可以这样处理:

            1,修改页面viewport-fit属性

            2,在H5页面链接一个iphonex.css来给iPhone X访问的页面增加对应的适配层

            3,在H5页面上给对应的dom结构加上适配的类名

        iphonex.css

image.png

image.png

        如上,这样做的问题是,要修改的页面非常多,而且给页面带来了额外的类名,对以后的样式移除也有一定的工作量。

        既然使用web的方式来解决这个问题不是很完美,是否可以通过终端的方式给webview增加适配层,从而解决这个问题呢?

      使用终端方案:

        经过跟终端同学的沟通,确定是可以通过终端的方式,针对iPhone X机型,在原生界面初始化的时候可选择是否要增加适配层,这样页面就不需要样式处理了。

        具体是通过链接中增加参数来进行适配:

          1,参数名:_wvx 控制iPhone X适配行为

          2,参数名:_wvxTclr 控制顶部适配层颜色

          3,参数名:_wvxBclr 控制底部适配层颜色

image.png

        对于顶部通栏的页面,通过加URL参数来增加顶部黑色适配层。

        对于有底部操作栏(包括通栏和非通栏),通过加URL参数来增加底部适配层以及设置颜色。

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

image.png

        这样,无需写一行代码,只需要给页面链接增加适配参数,就可以完美适配iPhone X了~

        以后的头部优化之后,也可以通过参数配置去掉目前的顶部黑色适配层

收藏(0)0
查看评分情况

全部评分

此主贴暂时没有点赞评分

总计:0

回复分享

共有1条评论

  • MK
  • 药师
  • 慧星的那一夜
  • Mr ken
  • YUI
  • cappuccino
  • mr jack
  • IT宅男
  • 选择版块:

  • 标题:

  • 内容

  • 验证码:

  • 标题:

  • 内容

  • 选择版块:

移动帖子x

移动到: