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端的展示需求。