关闭

mobile web 开发小结之一

标签: mobilecsshtml手机
1176人阅读 评论(1) 收藏 举报
分类:
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/
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:328232次
    • 积分:2104
    • 等级:
    • 排名:第18135名
    • 原创:3篇
    • 转载:57篇
    • 译文:0篇
    • 评论:21条
    文章分类
    最新评论