手机端页面遇到的问题及总结

一、盒子等比缩放：

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>