mobile web 开发小结之一

1.slide 两个样式问题
1)问题：tab-nav 在低版本android系统的浏览器中 显示数字

解决方法：

.tab-nav li{
font-size:0;
text-indent: -9999px; /*重点*/
}或
.tab-nav li a{
display:inline-block; /*重点*/
font-size:0;
text-indent: -9999px;
}

2)问题：slide 动画会影响slide控件下部元素，一左一右闪烁

解决方法：
.tab-content{
// 修复slide切换的时候屏幕闪烁
            -webkit-perspective: 1000;
            -webkit-backface-visibility: hidden;
}
2.input框光标控制
问题：input的光标在手机上并不像在pc上那样好控制
解决方法：在focus事件监听函数中，调用下面方法。关键点是用了setTimeout

function setPos(node, pos){
setTimeout(function() {
            if (node.setSelectionRange) {
                node.setSelectionRange(pos, pos);
            }
        }, 0);
}

3.在指定上下文通过id查找元素bug

问题：$(context).one('#ele') 在ios7的safari下，不会在context上下文查找，而会在全局查找
解决方法：如果一定要在某上下文查找元素，尽量不要通过id去查找，可以改成class查找 
 比如：$(context).one('.ele')
4.input 问题
事件顺序：touchstart touchend focus click
1)touchstart,touchend,tap 首次不触发，直接触发focus
解决方法：
目前没有找到更好的方法。暂时用click事件代替tap事件。
2)input 上的按钮，tap之后隐藏，input也会focus
解决方法：
目前没有找到更好的方法。暂时把隐藏按钮的tap事件改成click事件就ok了
3)uc下，键盘search之后，不会触发input blur
问题：这个问题很顽固。我是在小米2s的uc下做的测试，input框处于聚焦状态，然后点击键盘search按钮，然后用js触发blur事件，不管你是直接触发还是延时触发，blur事件都不会被触发，相当奇怪。
解决方法：在页面新创建一个input2，让input2聚焦，然后再把input2删除
4)safari下,input设置了placeholder,横屏再竖屏之后，会撑出一片空白区域
解决方法：在input父元素添加如下css样式
overflow:hidden;

css小结:

1.宽高自适应图片容器
.item-img{
background-image: url(http://gtms01.alicdn.com/tps/i1/T1mnE9FeXeXXb1upjX.jpg_200x200.jpg);
background-size: contain;
width: 30%;
}
.item-img:after{
display: block;
content: '';
margin-top: 100%; /*可以根据实际宽高比例设定*/
}

2.经常使用新属性

1) box-sizing:border-box;
2) background-size:contain;
3.尽量添加 -webkit-
4.图片转换成 base64 code
http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/
5.二维码生成
http://ux.alibaba-inc.com/qr/?data=http://www.etao.com/