web前端-移动端学习笔记

用on绑定的事件，在部分苹果手机下不支持，怎么解决？

试一试给这个元素加上cursor:pointer;

问：移动端下，<input>在聚焦的时候，有蓝色背景和边框，怎么解决？

答：使用outline:none;border:none;background:#fff;

移动端是什么？

是手机和平板。以前一直以为，移动端只有手机。

设置user-scalable=no和把initial-scale/minimum-scale/maximum-scale这3个值设置成一样，有什么区别？

只设置了user-scalable=no，如果安装了第三方软件，可能导致禁用缩放的功能失效，2种方法都用了，相当于2合1加强版

什么时候图片会模糊？

图片本来是500*500的，你放大了，就会模糊，如果小于500，就不会模糊

（18/2/5更新：遇到一种情况，原图不模糊，但是压缩宽高以后，就模糊了，有时间去了解下这是什么问题）

移动端自适应布局怎么实现？

先动态计算html字体大小，再给字体设置rem

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />，这个是什么意思呢？（原文链接：https://zhidao.baidu.com/question/562338285.html）

这个是针对移动端浏览器写的一些页面属性，name="viewport" --这就是针对移动端浏览器，width=device-width--告诉浏览器页面的宽度应该等于设备的宽度，initial-scale=1.0---页面将是原本尺寸展示，如果后面是2.0的话，就是是将页面放大两倍，maximum-scale=1.0,---最大放大至原先大小，----user-scalable=0" 是禁止缩放！

原来的代码：

<divclass="col-xs-6 padding-left-0 getcenteraddress"data-id='1'>

<divclass="btn-add"style="margin-top:6px;">添加途经点</div>

</div>

发现给.getcenteraddress绑定的事件，没有效果，打印$('.getcenteraddress')[0]是能够正常显示元素的，然后改成了<buttonclass="getcenteraddress">添加途经点</button>，点击按钮就有效果了

弹出框中，<input>在苹果手机下，会出现光标错位，怎么解决？

答：去掉弹出框，把弹出框的内容，放在iframe里，用显示iframe的方式来让用户输入

chrome的最小字体是12px，但是在移动端下，比如小米的微信里面，可以支持10px的字体

为什么大部分移动端项目都给html和body设置了overflow:hidden？

1.解决移动端页面滚动穿透问题，原文链接：https://www.cnblogs.com/GeniusLyzh/p/5808446.html

2.避免出现水平滚动条，不给的话，在某些场景下（适配不到位） 会出现水平滚动条 影响用户体验