移动前端webApp开发点滴积累20140629

#移动前端webApp开发点滴积累20140629

##关于input行内居中的问题
给input设定一个比较高的高度,在某些版本的移动设备上,文字不能垂直居中,即使设定了相同的行高也不行。(见图)

![input行内居中](http://images.cnitblog.com/i/84053/201406/292134125542918.jpg)

在这种情况下,我一般不改变input本身的高度,而是在input外围包裹一层,再在外围层做效果。

[demoURL](http://gh.p2227.com/m/input/)

##不要把内容fixed到屏幕的底部
之前在做的webapp中都会把一些功能按钮fixed到屏幕的底部,原意是方便操作,后来发现这并不起太大作用。而且弹出虚拟键盘的时候还会对其进行干扰(虽然UC浏览器中不会有这个问题)

![弹出虚拟键盘与fixed冲突](http://images.cnitblog.com/i/84053/201406/292202040543704.jpg)

所以现在功能区域也放在文本流中好了,不用fixed布局。

[demoURL](http://gh.p2227.com/m/fixed-keyboard/less.html) [demoURL2](http://gh.p2227.com/m/fixed-keyboard/tooMany.html)

##调试时如何清空缓存
以我的小米3为例吧,在设置->应用中会找到相关的应用(一般是浏览器,也有可能是内嵌webView的应用),点击进去会列举出一系列相关的应用数据和缓存,根据情况清空即可。

移动前端webApp开发点滴积累20140629,布布扣,bubuko.com

时间: 2024-12-14 18:44:34

移动前端webApp开发点滴积累20140629的相关文章

前端辅助开发工具积累

一.IDE 1)Edit Plus 2)Notepad++ 3)Dreamweaver 4)ultraedit 二.浏览器插件 1)IE Developer Toolbar(布局样式,脚本调试,性能分析) 2)Firebug(布局样式,脚本调试,性能分析) 3)chrome developer tools(布局样式,脚本调试,性能分析) 4)HTML Validator(通过FF的附加工具中添加插件,验证html的是否满足w3c的合法性) 三.其他辅助工具 1)PngOptimizer(压缩pn

小程序开发点滴积累

现在想把已经用vuejs开发的前端web页面搬迁到微信小程序,研究了许久,前端界一如既往变化迅猛,目前国内有很多比较优秀的框架可以借用. 其中mpvue是美团开源的一款适合vue开发者胃口的小程序开发框架.它支持完全的vue开发体验,基本上存量的vuejs组件可以经过较少的修改直接使用. 但是如何能够用上小程序中已经存在的很多开源优秀的UI库呢? 这些优秀的UI库基本上分为两类,一类是完全为小程序打造,基于小程序的自定义组件来定义的,无法通过vue组件来直接调用,比如vant-weapp,ivi

webApp开发几点体会(移动前端)

#webApp开发几点体会(移动前端) ##前言 本文旨在记录本人涉足移动webApp开发的几点体会,欢迎分享与指正. ##再见,IE678 移动设备,Android跟iPhone是主流,即使是win8设备,自带的都IE10以上,再也见不到那个不按W3c套路解释的浏览器了,很多兼容性问题都可以放下,专心处理业务了. ##HTML5/CSS3 HTML5/CSS3在移动设备上已经非常普及了,再也不用考虑以前在桌面设备上是否有旧版本浏览器的问题了.HTML5的跨平台.便于维护.开发成本低,各种优点使

转向移动webApp开发的前端工程师必要的代码,手机webApp触摸左右滑动切换轮播图片广告

刚进一家新公司,公司专做手机App的,由于公司业务太多,传统的方法开发app成本太高,每个app要开发几个版本,公司有个想法就是做webApp来代替传统app.我是才接触到webApp的美工一枚. 今天给小伙伴们分享一个好东西,webApp轮播效果,支持手机上用手左右滑动的效果,因为手机的触摸事件和PC端用鼠标操作的事件是不同的,所以我就需要针对移动端的设备触摸事件做相应的轮播特效.大家可以去看下易迅的:http://m.yixun.com/t/ 和淘宝的http://m.taobao.com/

移动端WEBAPP开发遇到的坑,以及填坑方案!持续更新~~~~

前言:在移动端WEBAPP开发中会遇到各种各样的问题,通过此文对遇到的问题做一个归纳总结,方便自己日后查询,也给各位前端开发友人做一个参考.   此文中涉及的问题是本人开发中遇到的,解决方案是本人思考和查询资料的结果,纯属于个人的见解,一个需求,纵有千百种实现方式,所以如有歧义,请温柔吐槽! 此文会持续更新,前期内容会比较杂乱,待Q&A积累到一定量后,会进行整理. css3 1.Q:css3动画在Ios运行正常,在Android无法运行.因‘-webkit-’前缀未正确书写导致  A:-webk

webapp开发调试环境--weinre配置

用谷歌调试工具中的手机模拟器模拟手机进行webapp的开发,与真机上的效果还是有些偏差,opera手机模拟器的效果亦不佳.有时在pc上开发出来的webapp效果良好,在部分真机上就出现了偏差,这时候就须要我们进行微调. 在pc上微调后公布到測试环境再在手机上看效果,开发非常慢,效率非常低.这时候就想着有一个能够在手机上调试的工具,能够随时更改參数随时看到手机上的效果,免去公布再測试.模糊预计參数不精准的麻烦,weinre就是一个这种工具. weinre能够在PC上远程调试手机上的页面,和pc浏览

移动端webapp开发必备知识

移动端webapp开发必备知识 移动设备的用户越来越多,每天android手机的激活量都已经超过130万台,所以我们面向移动终端的WebAPP也开始跟进了.本文主要介绍webapp的开发与调试的相关知识和经验,以及给出几种可选的解决方案. 一.基本概念 (1) CSS pixels与device pixels CSS pixels: 浏览器使用的抽象单位, 主要用来在网页上绘制内容. device pixels: 显示屏幕的的最小物理单位,每个dp包含自己的颜色.亮度. 等值的 CSS pixe

常用的移动前端webapp交互细节

#常用的移动前端webapp交互细节 ##select的表现方式 ###PC端 select控件在传统PC桌面已经存在多年,由于在IE6等低版本浏览器容易造成层级错乱,一直被一些UI框架所抛弃,而用div层去模拟. ![传统的select控件](http://images.cnitblog.com/i/84053/201407/271218506505629.jpg) ###移动设备 而在移动设备上,select 控件的表现方式不太一样,如下图,分别是UC浏览器,小米的系统浏览器,及海豚浏览器的

前端技术开发的一些建议

这个是一位腾讯前端工程师写的意见 原文 http://www.vinqon.com/codeblog/?detail/11101 给前端同学的一些建议 学习建议以前经常交流,网上也很多,说得太多就会变得太虚了.我随便想了几点,没有什么逻辑线索,大家可以参考一下. 1).开一个技术博客 可以通过博客写学习笔记,积累技术经验,记录学习过程: 可以展示你自己的成果.而且有时候面试有一种情况,有很多问题不是你不会答,只是没有酝酿过.想过一遍写过一遍之后表达会流畅很多: 有精力的可以自己写一个Blog程序