IOS兼容 - uniapp ios固定定位失效与刘海屏的坑

news/2025/3/20 0:15:18/

问题描述

uniapp 一套代码,打包之后安卓可以正常显示版本号,IOS不可以
错误现象:IOS只有滚动到屏幕底部才能看到版本号

原因分析:

IOS设计更希望屏幕跟随着用户滚动而滚动,所以无法实现相对浏览器窗口的固定定位。
IOS实现的功能是相对最近的允许滚动的元素定位,且不能遮罩滚动元素的兄弟吉父元素的兄弟元素。

一般情况:
固定定位是相对于浏览器窗口,且可以使页面中的某个元素不随浏览器的滚动而消失

IOS固定定位
固定定位相对于滚动元素,且可以随着屏幕滚动而消失
IOS的固定定位等同于它是相对滚动元素固定位置(类似于absolute定位)

解决方案:

如果需要浏览器的窗口定位,需要保证当前父元素不能添加滚动样式,才可实现固定定位。

将需要固定(position:fixed)的元素放在拥有滚动元素的外面即可,例如旋转transform/滚动条/轮播图scroll-view组件等等。

方案一:直接看成absolete定位,相对body作为父元素,使用绝对定位定位进行定位(较为繁杂)

方案二:隔离处理
将需要滚动的主体和固定的部分,分别用两个容器去写即可。

 <body><div class='warper'><div class='main'></div><div><div class="bottom"></div></body>
css部分
.main{overflow-y: scroll;}
.bottom{ position:fixed;bottom:0;width: 100%;
}

总结:

  1. fixed在某些情况下可能导致容器内的子元素的1px边框线消失,即使使用z-index也无法解决。
    解决方法:可以使用translateZ属性来解决

  2. ios下,fixed定位的容器内不能带有input等可以唤起键盘的元素。
    解决方法: 在input聚焦唤起键盘时会去掉fixed定位状态,改为absolute。

  3. 尽量不要在可滚动的容器内包含fixed定位的子元素且ios不支持onresize事件

参考文章:https://blog.csdn.net/surui0419/article/details/128082238
https://blog.csdn.net/weixin_34357887/article/details/88016424


http://www.ppmy.cn/news/1580459.html

相关文章

VLLM专题(二十六)—使用 Docker

1. 使用 vLLM 的官方 Docker 镜像 vLLM 提供了一个官方 Docker 镜像用于部署。该镜像可用于运行与 OpenAI 兼容的服务器,并可在 Docker Hub 上获取,名称为 vllm/vllm-openai。 docker run --runtime nvidia --gpus all \-v ~/.cache/huggingface:/root/.cache/huggingface …

【Nexus】Maven 私服搭建以及上传自己的Jar包

Nexus 安装 docker run -d -uroot --name nexus3 --restartalways -p 8081:8081 -v /data/nexus-data/blobs:/nexus-data/blobs -v /etc/localtime:/etc/localtime sonatype/nexus3这里也提供一下docker-composer的方法 .env 文件 VERSIONlatest CONTAINER_NAMECONTAINER_N…

harmonyOS NEXT开发与前端开发深度对比分析

文章目录 1. 技术体系概览1.1 技术栈对比1.2 生态对比 2. 开发范式比较2.1 鸿蒙开发范式2.2 前端开发范式 3. 框架特性对比3.1 鸿蒙 Next 框架特性3.2 前端框架特性 4. 性能优化对比4.1 鸿蒙性能优化4.2 前端性能优化 5. 开发工具对比5.1 鸿蒙开发工具5.2 前端开发工具 6. 学习…

基于Python+SQLite实现(Web)验室设备管理系统

实验室设备管理系统 应用背景 为方便实验室进行设备管理&#xff0c;某大学拟开发实验室设备管理系统 来管理所有实验室里的各种设备。系统可实现管理员登录&#xff0c;查看现有的所有设备&#xff0c; 增加设备等功能。 开发环境 Mac OSPyCharm IDEPython3Flask&#xff…

美国站群服务器租用应该怎么选?

选择美国站群服务器租用时&#xff0c;可以从以下几个方面进行综合考虑&#xff1a; ‌IP地址数量与质量‌&#xff1a; 根据网站站群的规模&#xff0c;确定所需的IP地址数量。确保服务商提供的IP资源足够&#xff0c;且IP地址质量较高&#xff0c;如不同C段的IP&#xff0c;避…

Python扑克牌游戏更新哦~【增加更多牌类】

以下是更新后的代码&#xff0c;包含了常见单牌、对子、三带、顺子、连对、飞机等 更新后的完整代码 import random class Card: def __init__(self, suit, rank): self.suit suit # 花色&#xff1a;♠, ♥, ♣, ♦ self.rank rank # 牌面&#xff…

【NLP】 9. 处理创造性词汇 词组特征(Creative Words Features Model), 词袋模型处理未知词,模型得分

处理创造性词汇 & 词组特征&#xff08;Creative Words & Features Model&#xff09;&#xff0c; 词袋模型处理未知词&#xff0c;模型得分 处理创造性词汇 & 词组特征&#xff08;Creative Words & Features Model&#xff09;1. 处理否定&#xff08;Negat…

Go语言--语法基础3--变量常量运算符--变量

1、变量 变量是几乎所有编程语言中最基本的组成元素。从根本上说&#xff0c;变量相当于是对一块数据存储空间的命名&#xff0c;程序可以通过定义一个变量来申请一块数据存储空间&#xff0c;之后可以通过引用变量名来使用这块存储空间。Go 语言中的变量使用方式与 C 语言接近…