Some summary of PHONEGAP+HTML5 development app

1.CSS3 rounded white edge: When using the CSS3 fillet effect, white edges are generated on some Android machines, so a div should be in the rounded div (the background color is the same as the outside), and then there is a fillet effect inside the div that uses its own background color

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. Screen resolution problems: for example, the 640*480 on the PC and the device's resolution 640*480 different, involving resolution density (DPI). On a PC, a page developed on a 640px is placed directly on the device (the resolution of the device may be as high as 1024*960) may be exceeded.

Under Android, you can use target-densitydpi = [Dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] to automatically scale according to the device size.

iOS does not support this setting, manual scaling via 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. Device Keyboard Eject Extrusion page causes page pinning elements (such as navigation bar and bottom toolbar) to be in a disordered position.

position:fixed;

Method One: iOS has a special setting to control whether the keyboard affects the layout, instead of affecting it. (the keyboard will cover the top of the page without squeezing the page content)

PhoneGap project in config:

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