mobile web 开发小结之一
来源:互联网 发布:dev怎么编程 编辑:程序博客网 时间:2024/05/29 09:31
1.slide 两个样式问题
1)问题:tab-nav 在低版本android系统的浏览器中 显示数字
.tab-content{
// 修复slide切换的时候屏幕闪烁
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
2.input框光标控制
问题:input的光标在手机上并不像在pc上那样好控制
解决方法:在focus事件监听函数中,调用下面方法。关键点是用了setTimeout
解决方法:如果一定要在某上下文查找元素,尽量不要通过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;
.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) 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/
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/
- mobile web 开发小结之一
- Mobile web 开发参考资料
- Mobile Web开发基础之一————viewport标签
- HTML5 开发Mobile Web App
- Mobile web app 开发总结
- mobile web前端开发总结
- jQuery Mobile开发web App
- IbatisNet开发使用小结 之一
- windows Mobile 软件开发入门小结
- web app/mobile web开发入门
- Web开发心得小结
- web前端开发小结
- WEB 开发技术系列之一
- Oracle Mobile Web Application (MWA) 学习小结(1)
- Mobile Web App 开发资源收集
- mobile web app 开发工具收集
- mobile web app开发总结-getting start
- 以 HTML5 开发 Mobile Web App
- 国际金价半年跌去23.6% 中国大妈算盘落空
- 表(Table)和段(Segment)之间是什么关系
- oracle迁移到mysql时insert数据到mysql text字段发现报字段不够长的问题
- pthread_mutex_t的使用
- Linux下批量删除.svn目录
- mobile web 开发小结之一
- 2007LA 3902 网络(树+贪心)
- 拓扑排序
- OnTimer不被调用诊断步骤
- JQuery实现页面跳转
- QT中读取和写入CSV格式文档
- SVN代码同步的一个小用法
- APP开发网页自动滚屏动态加载 页面滚动动态加载数据,页面下拉自动加载内容
- 每天进步一点点-------python之拉丁隐语转换器