IOS 底部margin失效

最新推荐文章于 2023-08-22 13:03:01 发布
原创 最新推荐文章于 2023-08-22 13:03:01 发布 · 954 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #ios #margin #机型 #安卓

本文探讨了在iOS设备上使用margin-bottom布局时遇到的问题，详细分析了margin在不同平台上的表现差异，特别是在底部留白场景中，margin-bottom在iOS上无效而在安卓上有效的情况。文章提供了两种解决方案：一是调整整体布局；二是通过添加空白块（DIV）来实现留白。同时，文中提到padding虽能解决间距问题，但会伴随容器底色，因此未被采纳。

原文链接:https://dsx2016.com/?p=165

➢ 问题

和布局方式有关

使用margin把底部设置一定的间距,IOS上 margin-bottom无效,安卓有效

➢ 场景

仅在底部需要撑开一定间距时,使用margin失效

但是padding在撑开间距的同时也会伴随容器自带的底色,非白,所以不考虑

如图所示

➢ 解决方式

1.更改整体布局

2.在需要留白的区域添加空白块(DIV)

➢ Tips

具体兼容还与部分机型和系统版本有关,不必一概而论

小程序底部最后一个元素设置margin-bottom部分android机型不生效IOS可以
闫瑞锋的博客
08-10 685
解决办法统一设置 改成padding-bottom padding-bottom:
IOS网页适配，解决iphoneX下部小黑条问题 和hover不起作用
java_utf8的博客
01-27 410
感谢博主博文： 原文链接 https://blog.youkuaiyun.com/chunxiaqiudong5/article/details/104065563?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1.not_use_machine_learn_pai&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBai
WeChat------IOS中margin-bottom无效!!!
COCOLI_BK的博客
08-24 349
问题描述: 小程序给一个view设置margin-bottom 模拟器上是好的 但是(iOS)真机上无效!!! 解决方案: 可以添加一个空的view设置响应的高度来模拟对应的样式或者套个父view加padding
ios margin失效
lulu_678的博客
08-09 301
https://blog.youkuaiyun.com/weixin_34380781/article/details/88677837
uniapp margin-bottom失效（ios系统）解决方法
qq_17627195的博客
09-17 1209
uniapp margin-bottom失效（ios系统）解决方法 用了position: fixed就导致商品加载到最下面以后，会被自定义导航遮挡住。
ios 关闭 margin
lylsh1993的博客
01-08 479
margin是苹果为了帮助开发者控制控件间关系的产物，然而实际上它默认显示的规律并不好掌握，对开发者是个鸡肋，也是个干扰。 本文所讲并非永久禁用margin，如果知道请留言告知，谢谢。 一.  我们在添加依赖的时候，一般有2种方式，一种是在界面上拉线 ，一种是使用编辑区右下角3个依赖按钮。 1. 界面拉线（或者左侧栏拉线），可以按住Option，切换对应开启/关闭的m
ios 微信打开h5页面为什么会有底部两个按钮
最新发布
08-04
首先，用户的问题是关于iOS微信打开H5页面时底部出现两个按钮的原因及解决方法。根据系统级指令，我需要使用中文回答，结构清晰，逐步解决问题，保证回答真实可靠。 回顾引用内容： - 引用[1]：提到在微信浏览器中...
iOS橡皮筋回弹
落下香樟树
10-23 1695
处理iOS端橡皮回弹效果 近期开发的项目有一部分是与微信公众号相关的H5页面，在Android端微信上页面效果展示无异常，但是在 iOS端微信多多少少会出现一些意想不到的bug。此次主要针对移动端H5页面在iOS端产生的 橡皮回弹（橡皮筋效果）问题做一下相关记录，希望对遇到类似问题的同学有所帮助。 方案一：使用 inobounce.js inobounce.js github地址 在 html主页面的 header 标签中引入inbounce.js，即 。当引入此文件之后，iOS端整个页面都无法滑动
ios嵌入h5去掉“橡皮筋”回弹
denglouhen的博客
09-22 2825
UI在走查页面的时候好几次提到了这个问题，在h5页面最顶部或者底部拉页面的时候，还会出现一块页面之外的空白，松开手页面回弹回去，UI表示这样看起来页面像是截断了很不友好，能否拉了之后还是背景色而不是白色。 首先想到的就是外面包一层高度为需要视窗高度的fixed div，然后让里面的内容滚动。可惜的是在ios上滑动出现问题——当scroll bar消失后，页面滑不动了。 于是搜索一下怎么去掉ios的“橡皮筋”，于是看到了插件，其原理就是在支持-webkit-overflow-scrolling属性的元素上
CSS定位 子绝父相造成的内边距失效问题
changan2018的博客
12-07 823
css定位简介，子绝父相造成的内边距padding失效问题，echarts的tooltip移入移出造成大屏抖动，大屏的滑动条随之出现
苹果端margin属性不生效
u010613970的博客
11-09 1044
今天有个项目，这个项目已经完成了的，之后因为本人没有苹果手机，所以基本都是使用安卓手机或者chrome的模拟ipone，今天客户反馈回来说，底部内容被一个使用了position: fixed;属性的元素遮挡住了，底部内容我是使用margin属性，因为底部相对浏览器的绝对定位的元素的高度为60px，所以我就设置了margin-bottom为70px，在安卓 上，在电脑浏览器上，都好好的，结果在苹果浏...
苹果手机margin不生效问题解决方法
a1140931339的博客
05-25 1337
苹果手机margin不生效问题解决方法 http://blog.sina.com.cn/s/blog_a4ab5ae00102x30l.html 转载于:https://www.cnblogs.com/lilyhj/p/9086575.html
移动端h5-列表最后一个margin-right不生效
qq_41154522的博客
08-31 618
移动端h5-列表最后一个margin-right不生效
微信小程序中IOS机型 margin-bottom 属性失效问题
欲变世界，先变其身
09-29 1206
在微信小程序中，给一个view设置margin-bottom属性，在模拟器上生效，但是IOS真机上无效。
ios手机margin-bottom失效问题
mingquantingxue的博客
11-13 1769
问题 小程序中的页面设置margin-bottom，在模拟器及安卓机中的展示效果都与预想的一样。而在iPhone手机中margin-bottom会失效。 原因 从IOS8开始，UIView的属性var layoutMargins:UIEdgeInsets指定该View的subview同其edge的间距。AutoLayout使用margins来放置内容。其默认值为8pt。 如果一个View是ViewController的rootview，系统会自动设置和管理margins，top和bottom。margins
小程序margin-bottom在IOS里面不起作用的解决方法
小程序开发
08-22 594
将margin-bottom 改成 padding-bottom。小程序用margin-bottom在IOS手机失效问题。如何解决这个问题，可尝试用下面方法。
IOS margin失效问题,以及CSS媒体查询区分iPhone 6、 iPhone8、iPhone8 Plus和iPhoneX
m0_50015961的博客
12-10 788
CSS媒体查询区分iPhone 6、 iPhone8、iPhone8 Plus和iPhoneX /*iPhone6和iPhone8*/ @media only screen and (device-width : 375px) and (device-height : 667px) and (-webkit-device-pixel-ratio : 2) { /*code*/ } /*iPhone6 Plus 和iPhone8 Plus*/ @media only scre
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值