iphoneX样式兼容

// 1.viewport meta 标签增加属性viewport-fit=cover

// 2.body元素增加样式 body { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } // 3.如有fixed底部的元素，也增加上面样式 xxx { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); background-color: #fff; // 记得添加background-color，不然会出现透明镂空的情况 }

转载于:https://juejin.im/post/5abf4e586fb9a028c675d4f7

iphoneX样式兼容相关推荐

webpack：全局变量、图片处理、样式兼容
文章目录 webpack:全局变量.图片处理.样式兼容前情回顾全局变量图片处理(三种方式) 模块化样式兼容性 webpack:全局变量.图片处理.样式兼容前情回顾装载器loader(加载) ...
ie浏览器样式兼容写法_IE浏览器兼容问题-----html和css的兼容写法
用户使用的浏览器五花八门,我们要保证每一种浏览器都能兼容我们的代码,不能要求用户去改变浏览器,那么就得在我们的代码上下功夫.此时我们要用到hack. HACK就是针对不同的浏览器写不同的HTML.CS ...
bootstrap和css样式兼容（ie、360、qq）不同浏览器的解决办法
一.作为一个之前没有真正实践项目的前端新手,这次在实践的时候就发现了一个严重的问题--兼容性. 开发者在前端开发,调试的时候,使用的基本都是谷歌.火狐这种开发者浏览器,忽略了其实我们国内主流的浏览器仍 ...
踩过的坑—iphone手机H5样式兼容总结
对一个前端开发者来说,最煎熬的莫过于"兼容"两个字了(说到这个词朋友们是不是身体一抖),哪怕对于工作多年的老油条来讲,也不是完全了解各种场景下的兼容性处理方法.在这里我就把我在工作 ...
css改变滚动条样式兼容火狐_jq完美解决css滚动条样式IE火狐不兼容问题
上次关于css滚动条样式的文章<美化css滚动条样式,就这么简单>,不够完美不兼容IE.火狐浏览器,但今天这篇文章可以完美解决这个问题,用到了jquery插件jquery.mCustomS ...
HTML 样式兼容不同设备类型
在项目中遇到在屏幕上显示的效果和打印时显示的效果不同,可以使用media属性来指定用于不同的媒介时使用的样式. media属性值: 值描述 screen 计算机屏幕显示(默认) tty 电传打字机以 ...
兼容ie6css怎么设置,CSS样式兼容IE6、IE7、IE8、FF火狐浏览器的方法
网页布局设计技术迄今为止主要有:table表格布局,DIV+CSS布局以及层布局.目前的网页布局设计领域主流是以DIV+CSS布局为主,table表格布局和层布局为辅.另外我还要告诉你一个秘密,那就是 ...
backgroud背景色样式兼容ie8 rgba()用法
今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不是难题,只需要给这个div设置如下的属性即可: background: rgba(255,255,255,.1); 但是要兼容到 ...
【微信小程序开发】IOS与安卓样式兼容问题
1.margin在IOS中失效在页面中元素使用margin值,在某些IOS设备下会出现失效的情况,而安卓机则正常显示,此问题暂无直接的解决方案,当前使用空DIV控制间距. 2.fixed定位问题整 ...

iphoneX样式兼容

iphoneX样式兼容相关推荐

最新文章

热门文章