首页 > 代码库 > phonegap+html5开发app的一些总结
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="http://www.mamicode.com/false" />