移动端适配常见坑

一、刘海和底部遮挡
问题：的刘海会遮挡页面，底部的滚动条也可能会遮挡页面。横屏时除了左侧和右侧有遮挡，底部也有遮挡。
解决：给被遮挡处留出一小块空白区域。
实现：meta标签里属性中添加-fit=v=cover，
配合给body加上样式：
二、1px适配方案
三、图片模糊问题
问题：在电脑上1px的像素，呈现到手机时会根据设备像素比变成2px或3px,图片被放大了。
解决：准备不同大小的图片，根据设备像素比进行更换。
实现：
四、遮罩后的背景滚动
问题：在弹窗遮罩上滑动时，遮罩后面的背景在滚动。
解决：在遮罩出现时，给背景添加:fixed; 高度设置为当前高度
五、键盘唤起时底部fixed的东西会跟着内容滚动
问题：键盘唤起时底部fixed的东西会跟着内容滚动。
解决：给内容添加-y:;限制只有内容滚动而不是整个页面滚动。
【移动端适配常见坑】实现：

文章插图
六、操作
七、移动端默认样式
八、flex布局的子元素不起作用
在中，发现某个flex子元素的属性不起作用，元素被挤压。
查看后发现由于子元素默认有flex-:1;当空间不够时进行收缩，所以仅需要将flex-设置为0，空间不够时不让收缩即可，此时正常。