android input 点击事件失效,手机端页面遇到的问题及总结

一、盒子等比缩放：

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 添加(禁止页面缩放):

五、手机端翻页效果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这个样式的设置，也就是说，鼠标放上去，能够出现“手”型的图标才被认作可以使用点击事件，于是果断增加了样式：

.next_button{

cursor:pointer

}