IOS margin失效问题,以及CSS媒体查询区分iPhone 6、 iPhone8、iPhone8 Plus和iPhoneX

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 screen 
    and (device-width : 414px) 
    and (device-height : 736px) 
    and (-webkit-device-pixel-ratio : 3) {
    /*code*/
 }

/*iPhoneX*/
@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { 
    /*code*/
}

在使用媒体查询时，发现在iphone中设置margin-bottom,margin-top值是失效。
查找资料发现：参考资料

1.从IOS8开始，UIView的属性var layoutMargins:UIEdgeInsets指定该View的subview同其edge的间距。AutoLayout使用margins来放置内容。其默认值为8pt。
2.如果一个View是ViewController的rootview，系统会自动设置和管理margins，top和bottom。margins为0pt。所以自己设定的margin-bottom,margin-top会失效。

针对IOS端margin-bottom，margin-top失效问题目前有两种解决方案：

1.用设定了高度的div撑开底部，达到与margin撑开的相同的效果。


 2.使用padding-bottom撑开底部，大多数情况下可以满足安卓端和IOS端的展示需求。