ios和安卓在 position:absolute 嵌套在app内的区别

最新推荐文章于 2024-06-04 16:26:19 发布
最新推荐文章于 2024-06-04 16:26:19 发布
阅读量455 收藏
点赞数
文章标签： python
原文链接：https://my.oschina.net/u/3680343/blog/1855298
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

h5端写的页面单独运行的时候一点问题都没有，但是嵌套在app内的时候在安卓和ios系统上却有不同的展示

最近在做排行榜的页面，ui设计图是这样的

0a2858a20996e62608a10fe4e3c93e1b267.jpg

所以我在排行榜列表使用了绝对定位，在父元素使用相对定位，页面嵌入app后，在安卓端是没有问题的，但是在ios端，突出的那个排名会被截取掉，如下图

 

10e292ce5465d0acbcfdd9c0e883da46b88.jpg

后来，我猜想是position:absolute的问题影响了布局，我就把排行列表集合放在与父元素同级上，这样排行列表集合就相对于body绝对定位，解决了ios上突出部分被遮挡的问题

 

转载于:https://my.oschina.net/u/3680343/blog/1855298

weixin_33940102
关注
uniapp [全端兼容] - 详细实现企业级电商购物车界面源码，自动计算购物车合计金额、商品数量加减、单选/一键全选、根据商品归属店铺分类，商铺所属商品嵌套展示和选择区分功能，仿淘宝京东电商购物软件
王佳斌
08-21 6107
uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，购物车，电商平台，uniApp购物车，购物车页面源码，店铺下所属的商品，购物车页面详细代码，全选商品，单选，右滑删除，全选反选，详细购物车源码，仿造京东淘宝购物车，编辑商品数量，结算商品，实时计算商品合计金额，购物车有店铺一键全选，商品购物车有店铺存在怎么做，合计金额，购物车商品的增删全选，类似美团的购物车，带商铺商户的购物车分类，多商家，商家商品，uni-app实现商城多商家购物车功能(超详细, 附
关于app内嵌h5页面调用百度地图定位问题，为什么定位不准呢？
weixin_42935603的博客
10-10 1万+
关于app内嵌h5页面调用百度地图定位问题，为什么定位不准呢？以下为代码。 百度地图：里面有3种定位方式（a:浏览器定位，b:IP定位，c:定位SDK辅助定位），我选择第3种，是需要app那块添加些什么吗？用第一种或者第二种方式也定位不准。第3中定位方式在手机端浏览器中定位没有问题，但放到app中就不行了。 setMap() { var that = this; ...
ios兼容性问题---position:absolute;属性
youngeffort的博客
11-16 5396
替代方案：移动端普遍是锁定视口的，可用position:fixed;替代    
ReactNative之Android绝对布局position:'absolute'问题
wayne214的博客
12-09 2074
工作中会遇到各种各样的问题，ReactNative开发也是填坑不止。 比如最近在开发需求中，就遇到一个问题。在一个卡片类型的右上角添加一个删除按钮。使用了绝对布局position:'absolute’属性，在Android上却无法正常显示，很是烦恼。 有一个相关的issue:https://github.com/facebook/react-native/issues/27255 正常希望的展示效...
uni-app：实现元素在屏幕中的居中（绝对定位absolute）
weixin_46001736的博客
09-27 5388
uni-app：实现元素在屏幕中的居中（绝对定位absolute）
适配android和iOS上position:absolute和input问题
weixin_34327223的博客
08-21 169
//适配android上absolute和input的问题var oHeight = $(document).height(); //屏幕当前的高度$(window).resize(function() { if($(document).height() < oHeight -100) { $(".bottombox").css("display", "none"); } else...
h5 iframe嵌套页面_汇总IOS下奇葩BUG以及iframe嵌套页面带来的一些困扰
weixin_39647499的博客
12-19 1845
做H5开发，安卓和IOS的兼容问题经常会困扰我们，尤其是跟第三方平台合作，用到iframe嵌入式应用，令很多Web前端开发的童鞋脑壳疼，相信大家也入了不少坑，且踩且珍惜吧，呵呵^_^。今天抽时间整理一些出来，希望能帮助到大家。iframe自动变宽了，在IOS手机上出现滚动条第一步：定义 iframe 中的scrolling属性为no，设置iframe中不显示滚动条。第二步：设置iframe的样式为...
常见的移动端H5页面开发遇到的问题解决
weixin_41510467的博客
11-09 812
有时扫描二维码后会跳转至某个地址,不幸的话QQ或者微信会对这个地址进行温馨提醒,这样会阻止部分用户继续访问,从而无法很好的将用户引导到活动想要推广的产品/品牌页面,如App的下载页面等,因此二维码的扫描测试不能少;举例:如果二维码扫描结果是应用的下载地址的,可以使用应用宝的微下载地址生成二维码,这就不会被"温馨提醒"了。2.生成BFC元素的子元素中每个子元素的外边距和包含块的左边界相接触(对于从右到左的格式化,右外边距和右边界相接触),除非这个子元素也创建一个新的BFC(如它自身也是一个浮动元素)
响应式开发
qq_31712573的博客
03-10 600
一、网页布局方式响应式开发 1、固定宽度布局：为网页设置一个固定的宽度，通常以px做为长度单位，常见于PC端网页。 2、流式布局：为网页设置一个相对的宽度，通常以百分比做为长度单位。 3、栅格化布局：将网页宽度人为的划分成均等的长度，然后排版布局时则以这些均等的长度做为度量单位，通常利用百分比做为长度单位来划分成均等的长度。 4、响应式布局：通过检测设备信息，决定网页布局方式，即用户如果采用不同的...
记一次移动端H5开发所遇到的问题与细节,以及ios兼容
想飞的猪的博客
09-14 3925
第一次弄移动端H5项目开发，虽然是简单的页面展示，但也遇到了很多细节问题与兼容问题，尤其是h5视频标签video, 一.移动端禁止缩放 兼容 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> 主要属性是user-sca...
uniapp小程序页面布局中如何在容器中进行绝对定位
最新发布
zhou404的博客
06-04 238
容器盒子中想让标题居中展示，然后添加小字在同一行的最右侧。
IOS设备对position的支持性
weixin_30659829的博客
03-02 125
最近在开发一个网页。 要嵌套在微信里 大家都知道 IOS版微信和安卓版微信还是一定的差距 IOS版微信在打开网页的时候回调取自己的浏览器以及内核 但是安卓版微信不会，他会默认使用自己的QQ浏览器和X5内核 这个大家在用微信打开网页是，把网页向下拉动时，可以看到 接下来 我说一下我遇到的问题和解决方法 由于要做一个展示性 数据网页 需求是做固定右滑动 这里我没有用到插件。。 ...
定位 position: absolute & relative
weixin_30563917的博客
07-25 393
【position:absolute】 意思是绝对定位，他默认参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，有以下属性： 1)如果没有TRBL，以父级的左上角，在没有父级的时候，他是参照浏览器左上角,如果在没有父级元素的情况下，存在文本，则以它前面 的最后一个文字的右上角为原点进行定位但是不断开文字，覆盖于上方。 2)如果设定TRBL，并且...
安卓+ios的输入框弹出键盘时，导致fixed或absolute定位的按钮顶上去的问题
weixin_42280395的博客
02-09 2276
如上图所示：在移动端中input唤起输入框的时候，会导致底部被fixed或者absoluted的button被顶上去，解决的第一思路就是要监听到输入框弹起的事件，对此解决方案要分为ios和android两种情况 以react为例，废话不说，直接上代码 视图层 ：xxx.tsx // 利用窗口尺寸变化监听android输入框唤起和消失，利用聚焦失焦监听ios输入框唤起和消失 const [resizeChange, setResizeChange] = useState(0) const [fo.
安卓与IOS样式不兼容，position:absolute
吴纯玲的博客
08-27 1万+
样式用到position:absoulte 在微信开发者工具和安卓真机测试，样式正常，然而ios系统真机测试显示不正常。 经查，因为父元素display:flex布局的原因，导致安卓与ios不兼容，换掉该布局方式，其子元素继续使用position:absoulte则样式正常 ---- 2019/03/18更新 再次实践证明，当父元素为display:flex，子元素为position...
uniapp IOS移动端 固定定位position：fixed 失效
litterCarp的博客
09-24 6315
在前端页面中，盒子用了固定定位，但是有时候会失效，该盒子没有脱离文档流，还是会随着页面滚动而滚动。最后折腾了好一会才发现原因。 原因是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 5884
在苹果的产品中并没有实现相对浏览器窗口定位。其实现的功能是相对最近的允许滚动的元素定位，且不能遮罩滚动元素的兄弟元素及其所有父元素的兄弟元素。并不是相对于浏览器窗口固定位置，它是相对于滚动元素固定位置。我也是网上查找的原因，似乎知识IOS系统（苹果）手机的问题。的元素放在可以滚动（拥有滚动条）元素的外面，包括。，要确保当前元素的父元素都不能添加滚动样式。的时候，如果期望实现先对。浏览器窗口定位的兼容。
踩坑路上——IOS Safari浏览器下固定定位position:fixed带来的问题与解决方案
热门推荐
hello world.
03-11 4万+
1.-webkit-overflow-scroll:touch; 2.使用其他布局方式
小程序在iOS图标position: absolute;不显示
05-26
iOS 对小程序图标的显示有一些限制，其中包括不支持 position: absolute 样式。因此，即使你在小程序中设置了 position: absolute 样式，iOS 也不会显示它。 如果你想要让小程序图标在 iOS 上显示，可以尝试以下方法： 1. 将 position: absolute 样式移除，使用其他方式布局。 2. 使用一个占位符元素来代替小程序图标，然后在占位符元素上应用 position: absolute 样式。 3. 将小程序图标嵌入到一个容器元素中，然后在容器元素上应用 position: absolute 样式。 希望这些方法可以帮助你解决问题！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值