移动端适配常见坑

一、iphoneX刘海和底部遮挡

问题：iphoneX的刘海会遮挡页面，底部的滚动条也可能会遮挡页面。横屏时除了左侧和右侧有遮挡，底部也有遮挡。

解决：给被遮挡处留出一小块空白区域。

实现：meta标签里content属性中添加viewport-fit=v=cover，

配合给body加上样式：

二、1px适配方案

三、图片模糊问题

问题：在电脑上1px的像素，呈现到手机时会根据设备像素比变成2px或3px,图片被放大了。

解决：准备不同大小的图片，根据设备像素比进行更换。

实现：

四、遮罩后的背景滚动

问题：在弹窗遮罩上滑动时，遮罩后面的背景在滚动。

解决：在遮罩出现时，给背景添加position:fixed; 高度设置为当前高度

五、键盘唤起时底部fixed的东西会跟着内容滚动

 问题：键盘唤起时底部fixed的东西会跟着内容滚动。

解决：给内容添加overflow-y:scroll;限制只有内容滚动而不是整个页面滚动。

实现：

六、webApp操作

七、移动端默认样式

八、flex布局的子元素height不起作用

在iphone6中，发现某个flex子元素的height属性不起作用，元素被挤压。

查看后发现 由于子元素默认有flex-shrink:1;当空间不够时进行收缩，所以仅需要将flex-shrink设置为0，空间不够时不让收缩即可，此时height正常。