糖果派对官方网站_可以赌钱的糖果游戏_手机版
iPhone X 适配手Q H5 页面通用解决方案

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

作者:Web前端    来源:未知    发布时间:2019-12-30 04:25    浏览量:

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

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

初藳出处: 林焕彬   

iPhone X 适配手Q H5 页面通用解决方案。导语:bb电子糖果派对 , 诺基亚X的面世,一方面前境遇于一切手提式有线话机行当的前行极具纠正带头羊的意义,其他方面也对现成专门的学问的页面适配带给了新的挑衅。 对于手Q中的各业务以来,受HUAWEIX影响的H5页面挺多,应该使用怎么着快速有效的措施来应对吧?

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

生龙活虎:本文提供三种减轻方案

iphoneX 适配客商端H5页面包车型大巴艺术教程,iphonexh5

前言

现阶段,相当多APP设计员小同伴已经起来倒车H5前端开拓啦,不过化解全体HUAWEI和安卓机型的适配难题是大家的重点。无论是设计应用软件照旧写前端H5.都是要思虑移动端的宽容性。

鉴于iphoneX做了周到屏並且还保留一块小刘海,由此不菲在先的运动端H5页面要求结合App顾客端做出相应的适配,具体如下:

1、顶上部分通栏

事情发生前的客商端直接接纳状态栏20pt+导航栏44pt的做法。由于iphoneX多了一块小刘海,由此iphoneX单独行使状态栏44pt+导航栏44pt,意味着内嵌的H5页面全体下移24pt。

2、后面部分操作栏

鉴于iphoneX是全面屏,页面最尾巴部分会被屈曲的拐角截掉大器晚成部分,非常是有底部固定悬浮的tab条会严重受到震慑。那时候供给底部留出一块空白安全区域,页面内容最后的底线应在四弟大拐角处。该安全区域的惊人为34pt。

3、适配方法

终上所述,结合iphoneX最近有意的无绳电话机参数我们得以应用的适配方法为:

(1)meta标签

ios11为了适配iphoneX对现成的viewport meta标签新添贰个天性:viewport-fit,假如顾客端从未做全屏适配,那么页面想要全屏覆盖,则可接纳该天性:

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

(2)媒体询问

1、利用constant函数

唯有设置了viewport-fit=cover技巧运用constant函数

@supports(bottom:constant(safe-area-inset-bottom)) {
    selector{
        padding-bottom:constant(safe-area-inset-bottom); 
        padding-bottom:calc(30px(假设值) + constant(safe-area-inset-bottom)); //根据实际情况选择适配方法
    }
}

2、利用iphoneX独特的型号参数

@media only screen and (device-width: 375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) {
    #buy {
        padding-bottom:34px; 
    }
}

(3)js决断(以下采取Jquery)

if($(window).width() === 375 && $(window).height() === 724 && window.devicePixelRatio === 3){
    #buy {
        padding-bottom:34px; 
    }
}

(4)顾客端左券  

也得以依赖客商端左券诉求客商端询问是不是是iphoneX,以此来保持和顾客端豆蔻梢头致。

4、参数解释

如上代码中的参数解释如下:

  • safe-area-inset-bottom — ios11新扩充天性,用于设虞诩全区域与边界的间隔
  • 375 — iphoneX设备的幅度
  • 812 — iphoneX设备的冲天
  •     3 — iphoneX设备的分辨率
  • 724 — iphoneX设备的可观(812卡塔尔(قطر‎ - 最上端通栏高度(88卡塔尔(قطر‎
  •   34 — 尾部安全区域高度

以上参数均以标准的1pt=1px进展总结,假如H5页面使用缩放的rem方式,那么1pt = 1px * 3(iphoneX分辨率)

总结

以上正是那篇著作的全体内容了,希望本文的剧情对大家的就学可能干活富有一定的参阅学习价值,如果有疑点我们能够留言交换,多谢大家对帮客之家的支撑。

适配顾客端H5页面包车型大巴秘诀教程,iphonexh5 前言 近来,超多应用程式设计员小同伴已经起来转向H5前端开采啦,可是消亡全部索爱和安卓机型的...

通栏页面

顶端通栏

或多或少事情的超级页面好些个施用了最上端通栏banner的功效,由于索尼爱立信X在状态栏扩展了24px的中度,对于当今通栏banner标准的内容区域会有遮挡境况。

技术方案:对于通栏页面在页面最上端增添大器晚成层中度44px的石磨蓝适配层,整个页面往下挪44px。

这种做法纵然不相符苹果必要的设计标准,但出于长期内更新任何banner的血本太高,可以先这么回顾管理,后续再优化banner的设计表现。

bb电子糖果派对 1

底部Tab栏/操作栏

多少页面使用了底层Tab栏/操作栏,由于HTCX去掉了底层Home键,替代它是34px中度的Home Indicator ,对于这两天的底层Tab栏/操作栏会诱致一定的掣肘。

斩尽杀绝方案:在页面尾巴部分增添生机勃勃层中度34px的适配层,将操作栏上移34px,颜色可以自定义。

bb电子糖果派对 2

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

上一篇:没有了
下一篇:没有了
友情链接: 网站地图
Copyright © 2015-2019 http://www.tk-web.com. bb电子糖果派对有限公司 版权所有