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/
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

HTML5+JS手机web开发之jQuery Mobile

一、起始之语 我一直都是在PC上折腾网页的,这会儿怎么风向周边捣鼓起手机网页开发呢?原因是公司原先使用Java开发的产品,耗了不少人力财力,但是最后的效果却不怎么好。因为,Android系统一套东西...

移动web app开发——JO、 jQ mobile和Sencha touch技术对比

sencha touch作为世界上第一个支持 HTML5 和 CSS3 标准的移动应用框架,它是Web 开发者的梦想在移动平台上不再遥远。但是随着时间的流逝,sencha touch却被后面的几种技术...

Mobile web 开发参考资料

转自IBM Worklight The following is a list of external resources we have collected to help you get the ...

HTML5开发移动web应用—JQuery Mobile(1)

JQuery Mobile是一个简单易用的web移动app开发框架。使用它就像使用jQuery一样,引入必要的文件即可。 最基础的jQuery Mobile文件的结构代码如下: 在此...

Mobile Web开发基础之四————处理设备的横竖屏

为了应对移动设备屏幕的碎片化,我们在开发Mobile Web应用时,一个最佳实践就是采用流式布局,保证最大可能地利用有限的屏幕空间。由于屏幕存在着方向性,用户在切换了屏幕的方向后,有些设计上或实现上的...

以 HTML5 开发 Mobile Web App

依照目前iPhone/Android 迅速提升市占率的情势来看,未来如果想要在先进的智慧型手机上撰写应用程式,要不是选择使用Objective-C + CocoaTouch Framework 撰写i...

移动web前端开发研究(jquery mobile 框架)

在此所说的移动平台前端开发是指针对高端智能手机(如Iphone、Android)做站点适配也就是WebApp,并非是针对普通手机开发Wap 2.0,所以在阅读本篇文章以前,你需要对webkit内核的浏...

跨平台移动Web开发工具 Titanium Mobile简介

作为一个越来越大的移动Web框架,它拥有超过300个的APIs和活跃的开发者社区。你从这个社区中得到每一个开发人员的帮助。 Titanium Mobile支持原生的iOS和Android UI元素如...
  • 1950
  • 1950
  • 2012-04-16 17:38
  • 510

Mobile Web开发基础之三————由按键想到的

按钮是天生为移动平台而生的:移动平台上的按钮往往被设计得比较大以便用户点击——与此形成鲜明对比的就是移动平台上的超链接。移动平台与桌面平台在人机交互上有显著的不同,移动平台的输入工具为用户的手指,显示...

Mobile Web应用开发的BP

Mobile Web应用开发的BCPAndroid移动终端web应用的开发与传统桌面web应用有很大区别。主要体现在 mobile context deli...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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