@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { .footer_home{ /*padding-bottom:34px;*/ box-sizing:border-box; bottom:34px; font-weight:bold; } .footer_home:after{ content: ''; z-index: 999…

兼容IphoneX的显示,一般有两种方法,一种通过css的media来做兼容,一种是通过js来做兼容. 一.我们先讲CSS的方法,我们要做两步即可: 1. 全屏覆盖,html使用 <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"> 2.通过对底部上移或者顶部下移进行处理 注:如果想下面constant env 属性有效果,请务必添加上…

iphoneX 没有home键,用其打开应用时,iphoneX的底部和应用底部导航重叠,不兼容. 解决办法: 打开manifest.json文件,在“plus”下加入以下代码(安全区域): "safearea":{ "background":"#fff", "bottom":{ "offset":"auto" } }, 保存后打包再次安装即可解决. 转载时请注明出处及相应链接,本文永久地…

iphoneX手机取消了实体Home键,取而代之的是主界面底部不显眼的横条“Home Indicator”.当网页底部fixed 元素时候,一部分元素可能就被这个横条遮挡住,怎么适配解决呢? 第一步: <meta name=“viewport” content=“width=device-width, viewport-fit=cover”> 第二步: 页面主体内容限定在安全区域内,如果不设置这个值,可能存在小黑条遮挡页面最底部内容的情况 body { padding-bottom: env(…

背景 公司项目开发中,发现iPhoneX上吸底元素存在被小黑条遮挡的问题 原因 在苹果 iPhoneX .iPhone XR等机型上,物理Home键被取消,改为底部小黑条替代home键功能,从而导致吸底元素会被小黑条遮挡覆盖的问题 解决方案 使用已知底部小黑条高度为34px/68rpx机型适配(不建议) 使用微信官方API,getSystemInfo()中的safeArea对象进行适配(建议) 使用苹果官方推出的css函数env().constant()来适配 (建议) 安全区域 看看图就明白了…

最近在公司开发游戏,使用cocos creator做微信小游戏,遇到一个很恶心的问题,如图: 如图所示,微信的广告位被iphonex的底部bar给弹出了一点位置,没有靠在底部. 在这里不得不吐槽一下微信的小程序接口还有个恶心的地方,那就是他的广告style没有bottom,right属性,使得置底部必须使用算法计算.也就是winsize.height-广告高度(realheight),居中是winsize.width-广告宽度/2. 而就算如此,在Android和iphone普通手机上是没有适配…

1.首先,底部的高不能写死. 2. var footer = $api.byId('footer'); $api.fixTabBar(footer);这句应该写在 footerHeight = $api.offset(footer).h;前面…

假设你有一个固定位置的标题栏,你的iOS10的CSS可能是这样写的: header { position: fixed; top:; left:; right:; height: 44px; padding-top: 20px; /* Status bar height */ }   为了自动调整iPhone X和其他iOS11设备,你可以在meta标签的viewport中添加viewport-fit="cover": <meta name="viewport"…

引言 iPhoneX发布至今已经有将近一年的时间了,各类app都多多少少做了对iPhoneX的适配,那对于我们H5页面该做哪方面的适配呢? 首先了解安全区域(safe area)的概念,它保证了内容在设备上的正确嵌入,不会被状态栏.导航栏等遮挡. Apps should adhere to the safe area and layout margins defined by UIKit, which ensure appropriate insetting based on the devic…

IphoneX适配正确姿势 写在前面 距离18年9月iphonex发布以来已经快两年了(所以对于iphonex机型的头部刘海(sensor housing)和底部小黑条(Home Indicator)的内容本文不在做过多赘述了),相信还有一些同学为iphonex系列机型如何完美适配在发愁,笔者结合公司移动端h5项目和一些官方文档做了一个总结,希望可以帮到大家. 预备知识 在开撸之前,我们需要了解一下安全区域.viewport-fit.env() 和 constant()三个必备的知识点 安全区域…