phonegap+html5开发app的一些总结

1.Css3圆角白边：使用css3圆角效果时，在android某些机器上会产生白边，所以应该在圆角的div外套一个div（背景色和外部相同），然后有圆角效果的div 内部使用自己的背景色

 

border-radius:5px;

box-shadow:inset 0 2px 5px #e1e1e1;

 

<div style=””>

<div style=”border-radius:5px;box-shadow:inset 0 2px 5px #e1e1e1;”>

</div>

</div>

 

2.屏幕分辨率问题：比如pc上的640*480和设备的分辨率640*480不一样，涉及到分辨率密度(dpi)。pc上按照640px开发的页面直接放在设备（设备的分辨率可能高达1024*960）上可能就超出了。

 

在android下可以采用target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]来自动根据设备尺寸来缩放。

IOS不支持这个设置，通过initial-scale = float_value手动缩放

 

<!-- html document -->

 <meta name="viewport"

     content="

         height = [pixel_value | device-height] ,

         width = [pixel_value | device-width ] ,

         initial-scale = float_value ,

         minimum-scale = float_value ,

         maximum-scale = float_value ,

         user-scalable = [yes | no] ,

         target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]"

/>

 

3.设备键盘弹出挤压页面导致页面固定元素（比如导航栏和底部工具栏）位置错乱。

position:fixed;

 

方法一:IOS有专门的设置控制键盘是否影响布局，改为不影响。（键盘将会覆盖到页面上方而不会挤压页面内容）

Phonegap工程中 config.xml:

<preference name="KeyboardShrinksView" value="false" />