ios与安卓底部按钮与输入框的兼容性

最新推荐文章于 2024-09-04 15:59:13 发布

any_fight

最新推荐文章于 2024-09-04 15:59:13 发布

阅读量2.6k

点赞数

分类专栏：前端文章标签： ios 安卓移动开发

本文链接：https://blog.csdn.net/weixin_42280395/article/details/121213730

版权

本文探讨了全面屏显示的适配，尤其是iPhoneX的适配，包括如何使用viewport-fit和constant/ env函数处理安全区域。此外，还分析了iOS与Android在软键盘弹出时的布局差异，以及如何通过调整input的position属性来优化显示效果，确保页面在不同设备上的布局一致性。

摘要由CSDN通过智能技术生成

全面屏显示的适配

随着科技的进步，移动端发展日新月异，到现在几乎是全面屏的天下，但市面上依然存在很多非全面屏的手机。
对于前端开发而言，做好对新型号和老型号手机的适配是毋庸置疑的，同时全面屏页意味着更多的差异

从大方向来讲ios和安卓系列手机的差异，小的来说，ios不同的版本，安卓不同的开发商机型都会存在其特有的显示规律，
首先以承载ios的iphone系列为例

iPhoneX的适配

iOS 11中采用了viewport-fit的meta标签作为适配方案；viewport-fit的默认值是auto

表头	表头
auto	默认：viewprot-fit:contain;页面内容显示在safe area内
cover	viewport-fit:cover,页面内容充满屏幕

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

在iOS 11+ 中的WebKit包含了一个新的CSS函数constant()，以及一组四个预定义的常量：safe-area-inset-left, safe-area-inset-right, safe-area-inset-top和 safe-area-inset-bottom
当合并一起使用时，允许样式引用每个方面的安全区域的大小。（必须要 viewport-fit=cover 才能生效）

padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
 
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

之所以写了constant和env两种是因为ios11.2版本以后constant废弃，env生效写2种是兼容所有ios版本

<!-- 以四个不同方向上的按钮为例 -->

<div className="App">
  <div className="top-area">
    <div className="button-style">顶部按钮</div>
  </div>
  <div className="left-area">
    <div className="button-style">左部按钮</div>
  </div>
  <div className="right-area">
    <div className="button-style">右部按钮</div>
  </div>
  <div className="bottom-area">
    <di