mobile web 开发小结之一

原创 2013年12月04日 11:59:33
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/

使用 jQuery Mobile 与 HTML5 开发 Web App(八) —— jQuery Mobile 工具栏

本文延续之前"使用 jQuery Mobile 与 HTML5 开发 Web App"系列文章,本文介绍的是 jQuery Mobile 中的 jQuery Mobile 工具栏。在 jQuery M...
  • lxl20052051
  • lxl20052051
  • 2015-03-05 16:12:37
  • 1084

使用jQuery Mobile框架开发移动端Web App的入门教程

jQuery Mobile是移动端的基于jQuery的Web前端开发框架,移动设备上的浏览器对HTML5的支持普遍较强,因而jQuery Mobile的UI设计主要针对HTML5,下面就来详细看一下使...
  • slqgenius
  • slqgenius
  • 2016-12-06 12:47:48
  • 2491

jquery mobile开发手机webapp页面

jquery mobile开发webapp(一)
  • z21102
  • z21102
  • 2016-06-23 13:40:37
  • 1309

使用 jQuery Mobile 与 HTML5 开发 Web App(十四) —— jQuery Mobile 方法上

本篇介绍的,是 jQuery Mobile 的方法。对比于 jQuery 方法可以实现 DOM 遍历,动画,Ajax 等各种丰富的操作,jQuery Mobile 的方法更像是 jQuery Mobi...
  • lxl20052051
  • lxl20052051
  • 2015-02-27 16:18:36
  • 858

使用 jQuery Mobile 与 HTML5 开发 Web App(十一) —— jQuery Mobile 事件详解

在前文《使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础》中,Kayo 对 jQuery Mobile 事件的基础作出了一...
  • lxl20052051
  • lxl20052051
  • 2015-02-27 16:21:36
  • 1005

使用 jQuery Mobile 与 HTML5 开发 Web App(一) 系列文章目录

“使用 jQuery Mobile 与 HTML5 开发 Web App”系列文章的数目累积起来也比较多了,为方便大家浏览, Kayo 把这些文章整理成一个目录,收录那些已经写好的文章并会继续更新。 ...
  • lxl20052051
  • lxl20052051
  • 2015-02-27 16:24:13
  • 1662

web编程课程小结

本学期学习了网络编程课程,但是并没有涉及到socket等内容,所以准确来说应该算是web编程课,以下是对本学期课程学习要点的一些总结: html/css (1)学习了常用的一些简单标签,然后制作了...
  • yz764127031
  • yz764127031
  • 2016-12-21 21:31:24
  • 341

使用 jQuery Mobile 与 HTML5 开发 Web App(十七) —— HTML5 离线缓存

本文要介绍的,是 HTML5 离线网络应用程序的特性,离线网络应用程序在 W3C 中的实际名称是 "Offline Web applications" ,也称离线缓存。当用户打开浏览器时,浏览器会将一...
  • lxl20052051
  • lxl20052051
  • 2015-02-27 14:58:08
  • 1150

使用 jQuery Mobile 与 HTML5 开发 Web App(九) —— jQuery Mobile 页面与对话框

在《使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 基础》中,Kayo 曾经简略介绍过 jQuery Mobile 的页面组件,当时只是举...
  • lxl20052051
  • lxl20052051
  • 2015-03-05 16:13:31
  • 1274

使用 jQuery Mobile 与 HTML5 开发 Web App —— HTML5 对 Web App 的影响

在本系列文章的开头,Kayo 曾经介绍过 Web App 的优缺点,并且说明了 HTML5 在其中起的作用,当然,Web Apps 的发展需要 HTML5 , CSS 与 JavaScript 以及后...
  • lxl20052051
  • lxl20052051
  • 2015-02-27 13:58:15
  • 807
收藏助手
不良信息举报
您举报文章:mobile web 开发小结之一
举报原因:
原因补充:

(最多只允许输入30个字)