IOS机型margin属性无效问题

时间:2023-03-10 02:08:02
IOS机型margin属性无效问题

这个问题很多小伙伴都有遇到,这次本猿也遇到了,记录一笔。

结论:简单的解决办法margin换padding!如有误,请大神不吝赐教。在Chrome浏览器移动端测试iphone5,打开的也是没问题的(这感觉有坑还是要在真机才能发现)。

以下跟本人问题一样,借用配图及说明。

原图文链接:http://blog.sina.com.cn/s/blog_a4ab5ae00102x30l.html

商城网站底部footer设置margin属性的时候发现真机IOS上无效,在iPhone6p上发现问题,屏幕较小,先把出现问题的截图发出来看一下

​安卓手机,打开正常

IOS机型margin属性无效问题

​iphone6 p 打开出现的问题(无视margin-bottom:60px)​

IOS机型margin属性无效问题

​当然,在google浏览器移动端测试iphone6p,打开的也是没问题的(这感觉有坑还是要在真机才能发现)

IOS机型margin属性无效问题

​思索找寻了好久,也有反映margin不起作用的,改成padding就可以,但是改成padding在我这里是不可取的,因为footer如果给加了padding-bottom:60px属性,那么footer的内下边距就是60px,也就是说有60像素高的黑背景,如果在页面内容高度小的页面,就会出现这样的情况:

IOS机型margin属性无效问题

​继续找之后,从“关于AutoLayout中的margin”这篇文章里找到了这样一句话:

“关于layoutMargins

iOS8后,UIView 有个属性 var layoutMargins: UIEdgeInsets ,用来指定该View的subview同其edge的间距。AutoLayout使用margins来放置内容。 默认的值为8pt。

如果一个View是ViewController的rootview,系统会自动设置和管理margins,top和bottom margins被设置为0pt,left和right的值根据当前的 size class (文末简单介绍一下size class)不同而不同,可能取值为16或者20pt(iPhone6 plus, iPad),你不能修改这些值。”

在我的理解,就是它无视我的margin-bottom:60px;自己给了footer一个margin-bottom:0px;的属性(不知我的理解是否正确,希望大神给予指点)​

因为pc和手机端要做成自适应,想到了一个办法,就是在footer下边,加一个div,给height属性60px,当屏幕宽度大于1024px的时候,给这个div属性display:none。