一、盒子等比缩放：
image.png
将元素的height属性设为0，通过padding-bottom属性确定元素高度，设置合理的padding-bottom值，例如上述的例子中，在宽度为21%时，如果需要高度是宽度的1.62倍，我们可以将padding-bottom取值为34%
二、安卓端line-height不起作用，使用padding
三、手机端icon使用2倍图标(背景图):
.allIcon-abas {
background: url("../images/AllIcon_tslM.png") no-repeat;
background-size: 600px auto;
background-position:-203px 0;
}
ps: 1. 600px 是创建Allcon_tslM.png 精灵图宽度的一半
2. background-position:-203px 0; 注：203是此图片在fw看到位置的2分之一
四、html头部meta 添加(禁止页面缩放):
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
五、手机端翻页效果h5slide
image.png
六、ios端微信页面滑动卡顿问题解决方法：
body {
-wekit-overflow-scrolling:touch;
}
七、ios端click事件时，元素出现闪动现象
解决方法-- 绑定点击事件的元素加上以下样式：
-webkit-user-select: none;-webkit-tap-highlight-color: rgba(200,200,200,0);
八、安卓端 window.location.href 失效的问题
解决方法：
window.location.href = location.href+'?time='+((new Date()).getTime());
九、input在手机端出现内阴影问题，解决方法：
input[type="text"] {
-webkit-appearance: none;
}
十、关于jq中on绑定click事件在苹果手机失效的问题
动态添加的内容，所以想要使用click事件，需要给他用on绑定一下：
$(document).on("click",".next_button",function(){
alert(1);
});
这个时候，使用苹果手机访问的时候，发现了一个坑爹的问题，如论如何点击“下一步”，都没有任何反应，可是在安卓和各种模拟器中一切正常。后来经过查找资料才知道，苹果有这么个设置：
对于点击的对象，拥有cursor:pointer这个样式的设置，也就是说，鼠标放上去，能够出现“手”型的图标才被认作可以使用点击事件，于是果断增加了样式：
<style>
.next_button{
cursor:pointer
}
</style>
网友评论