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

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


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

![input行内居中](//images0.cnblogs.com/i/84053/201406/292134125542918.jpg)

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

`20140701新增`发现只需要加上 `line-height:normal` 就可以了！，看来是有时候设备默认行高并不是normal

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


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

![弹出虚拟键盘与fixed冲突](//images0.cnblogs.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

关于input行内居中的问题

给input设定一个比较高的高度，在某些版本的移动设备上，文字不能垂直居中，即使设定了相同的行高也不行。（见图）

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

20140701新增发现只需要加上 line-height:normal 就可以了！，看来是有时候设备默认行高并不是normal

demoURL

不要把内容fixed到屏幕的底部

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

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

demoURL demoURL2

调试时如何清空缓存

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