uniapp中使用fixed固定定位导致ios和安卓差异解决办法

最新推荐文章于 2024-07-10 11:04:38 发布

岸边的白果

最新推荐文章于 2024-07-10 11:04:38 发布

阅读量5.4k

点赞数

文章标签： ios android javascript 前端 uni-app

本文链接：https://blog.csdn.net/weixin_46390926/article/details/121969241

版权

本文介绍了如何在uniapp中使用fixed定位时确保在iOS设备上正确显示，通过添加calc表达式解决因--top-window-height变量在CSS中使用报错的问题，实现安卓和iOS跨平台适配。

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

uniapp中使用fixed固定定位导致ios显示有问题，h5端可以直接设置，app端需要加calc（直接使用var(–top-window-height在css里面会报错），这样写安卓和ios都可以正常显示了

position: fixed;
top: 88rpx;
/* #ifdef APP-PLUS */
top: calc(var(--top-window-height) + 0px);
/* #endif */
-webkit-overflow-scroll:touch;
left: 0;
display: flex;

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

岸边的白果

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

uniapp(全端兼容) - 实现点击输入框时完美顶起键盘，获取键盘高度动态计算顶起距离，解决软键盘弹出时输入框被覆盖问题，uniapp微信小程序/移动端h5网页/安卓苹果app（示例代码，一键复制

高级前端工程师

03-07

3736

uniapp，支付宝微信小程序，移动端H5网页网站，软键盘弹出位置不对，软键盘挡住了输入框怎么办，获取键盘高度计算弹出距离，uniapp如何解决输入框input激活后键盘弹出遮挡问题，uniapp输入框偶尔被键盘遮挡，解决uniapp在App环境下输入框被软键盘遮挡的问题，uniapp 完美解决苹果和安卓input框遮挡兼容问题，uniapp输入框拉起软键盘时，输入框显示不全，被软键盘挡住一半，input被键盘遮挡的解决方案，软键盘遮挡输入框，uniapp软键盘顶不起来输入框，输入框没有被软键盘弹出来怎么办

iframe高度自动适应

恍惚窈冥

06-24

554

当iframe的高度设置成auto的时候，在ie6，ie7等一些浏览器中iframe的高度并不会随内容的改变而改变，而是会出现垂直滚动条。现在可以用javascript来解决，在iframe的文档加载完毕后，执行： function iFrameHeight() { var ifm= document.getElementById("mainIframe"); if(

2 条评论您还未登录，请先登录后发表或查看评论

css 相对定位绝对定位 固定定位

JL542180727的博客

03-23

470

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #father{ display: block; border: 1px solid #666; padding: 0;

uniapp：开发微信小程序，position: fixed布局，苹果X底部适配方案

sunluyi的博客

07-10

280

uniapp开发微信小程序，position: fixed布局，苹果X底部适配方案。

uniapp中fixed固定定位在app和h5中的差异bug解决办法

lyz246859的博客

05-21

3558

1.问题：在uniapp中使用fixed固定顶部后，在h5端会直接与手机的顶部导航栏重合，而app端则不会，这是因为h5端的定位参照是以屏幕实际顶部高度来算了的，而app端是以距导航栏的高度计算 2.解决方法：有2种方法一：直接在定位的css里属性top值改为：top: var(--window-top); 方法二：使用一个高度变量headerTop即可，this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHe

uniapp IOS移动端 固定定位position：fixed 失效

litterCarp的博客

09-24

6301

在前端页面中，盒子用了固定定位，但是有时候会失效，该盒子没有脱离文档流，还是会随着页面滚动而滚动。最后折腾了好一会才发现原因。原因是CSS样式中用position：fixed时候，如果有transform样式，那么position：fixed则会失效，所以要么把transform去掉，要么加上transform：translateZ(0)即可。 position: fixed; transform: translateZ(0); position: fixed; transform: tran

uniapp position: fixed 偶尔失效/不起作用（不显示）（苹果手机position: fixed兼容性/失效）

qq_17627195的博客

09-11

5855

在苹果的产品中并没有实现相对浏览器窗口定位。其实现的功能是相对最近的允许滚动的元素定位，且不能遮罩滚动元素的兄弟元素及其所有父元素的兄弟元素。并不是相对于浏览器窗口固定位置，它是相对于滚动元素固定位置。我也是网上查找的原因，似乎知识IOS系统（苹果）手机的问题。的元素放在可以滚动（拥有滚动条）元素的外面，包括。，要确保当前元素的父元素都不能添加滚动样式。的时候，如果期望实现先对。浏览器窗口定位的兼容。

基于uniapp的多tab滚动吸顶效果

11-19

uniapp是一个使用Vue.js语法开发跨平台应用的框架，它允许开发者用一套代码实现iOS、Android和H5等多个平台的应用。【描述】"NVUE多页签滑动吸顶效果，仅App支持"意味着这个功能是针对uniapp的Nvue页面设计的，...

uniapp 悬浮菜单、可拖拽、可切换形状、多端兼容

12-22

在移动应用开发中，uniapp是一个备受青睐的框架，它允许开发者使用一套代码实现跨平台开发，覆盖iOS、Android、H5、小程序等多个终端。本项目的核心特性是创建一个具有悬浮菜单功能的应用，该菜单不仅可拖拽，还能...

uniapp学习总结

weixin_67850938的博客

06-15

878

uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。uni-app组成和跨端原理uni-app能实现一套代码、多端运行，核心是通过编译器 + 运行时编译器：将uni-app统一代码编译生成每个平台支持的特有代码；如在小程序平台，编译器将.vue文件拆分生成wxmlwxssjs等代码。

2021-6月面试总结-vue，uniapp，小程序，h5，更新中

shuux666的博客

03-03

721

**一、**vue 2.6.11 vue****页面的生命周期？总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。创建前/后：在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在∗∗created∗∗阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在**created**阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在∗∗cre

position定位，ios 和安卓top值不一样

weixin_30815427的博客

07-20

492

position定位，ios 和安卓top值不一样解决方案：给父级invite-close加样式： box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; 　　转载于:https://www.cnblogs.com/tangbuluo/p/9341...

解决uniapp设置了position: fixed；样式布局塌陷问题

FUFCY的博客

05-23

1766

子组件设置position: fixed;父组件引用真机上出现问题，小程序没有，是因为子组件的第一层的类名和父组件第一层类名相同导致的，所以改类名不一样就可以了

uniapp打包的在ios系统上uni.navigateTo跳转慢

斗师——Ace

02-08

1076

1. animationType设置为none时，在ios上navigateTo跳转切换会很慢很慢！ uni.navigateTo({ url: '../test/test', animationType: 'none' });

解决ios position：fixed无效

weixin_37610189的博客

03-24

2355

//解决ios position fixed无效这种方法会造成弹出框轻微移动 /*var ua = navigator.userAgent.toLowerCase(); if (/iphone|ipad|ipod/.test(ua)) { var top = ($(window).height() - $(".strategyregister").height())/2; v

uni-app 使用fixed 定位到底部，设置bottom为0，被底部tabbar遮挡

m0_60855156的博客

06-25

3339

在小程序上tabbar没有将固定栏遮挡，如果直接调高，浏览器H5页面是对了，但在小程序上面离底部的定位就太高了解决办法 : bottom: var(--window-bottom,0);

关于uniapp中，ios关闭pop弹框安全区域不生效问题

weixin_45235764的博客

05-11

498

微信小程序uniapp中底部弹框ios关闭安全区域不生效的问题解决

uniapp元素使用了position: fixed后无法获取到触底事件

NiHao___的博客

04-26

474

uniapp元素使用了position: fixed后无法获取到触底事件

解决uniapp软键盘弹起导致页面fixed定位元素被顶上去