Adaptive layout and unit (PX, EM) selection for mobile application development

• Adaptive layout in mobile application development is very important because different device resolutions are not the same, the size is not the same, the use of adaptive layout in different devices show a variety of problems
• The ability to play an adaptive layout
  • Self-adapting layouts in CSS3
    • Percent Layout method: That is, size, position, margin, etc. are limited by percentage, can occupy the overall layout of the different equipment consistent
    • Webkit-box combined with-webkit-box-flex layout method: The use of webkit-box to achieve the flexible box mode layout, combined with-webkit-box-flex to achieve a completely segmented screen layout, Unlike half-scale, the percentage layout is not well controlled when there is a border, because if the total is 100%, plus the border will exceed the overall value, of course, you can add box-sizing on the basis of the percent usage: Border-box set border to occupy internal space to solve this problem, but now the mainstream layout is still using Webkit-box
    • Media Query Layout method: @media screen and (max-width:400px), using Media Query method to define the styles used by different models of equipment, to define the style for each size device, this method has some effect, but in the increasingly chaotic market conditions of Android devices , equipment size is more and more complex, not suitable for the whole media query to achieve adaptive layout
  • Dynamic realization of adaptive layout in JS
    • Using JS to get the screen size, calculated dynamically created layout, this way is too complex, and on the mobile side impact experience, basically abandoned
    • Monitor resize events and Oritationchange event implementations change the layout when the device status changes

• Adaptive mechanisms in Android

In Android, the layout is usually in DP and SP, because the two units are automatically scaled according to the device resolution, and the device width is defined as 360DP by default

• Hybrid the layout in app development tools

<meta name= "viewport" content= "Width=device-width, initial-scale=1, User-scalable=no, minimum-scale=1.0, maximum-scale=1.0 ">

• • First of all need viewport support, this kind of setup is supported in Appcan, Hbuilder, Apicloud, what are the adaptive layout methods for this design method?
    • Page in the webview of the principle: page in WebView the actual size is generally 360, and then pull it up to the resolution of the response, so the HTML in the WebView line is so thick, it seems obvious is not 1px, that is because the final display is amplified, is not a physical pixel, usually 1.5 or 2 physical pixels, so the entire interface looks so coarse, not sophisticated enough, the picture is enlarged, may appear blurry phenomenon
    • This layout features:
      • PX: Different sizes in different resolutions PX same PX value size is the same, that is, fixed size
      • EM: According to the font size to display, for different resolutions of the device is not the same size, that is, can be scaled small, similar to DP and SP, it is recommended not to center the layout of the unit
  • Refinement of layout method
    • First of all, in Android 1px is not 1 physical pixels, but is amplified, but in iOS is the real 1 physical pixels, which makes the app look better in iOS, which is why?
      • The UIWebView in iOS will recognize the Width property in the viewport in HTML5, changing the device's resolution to the physical pixel ratio according to the Width property
      • The relative properties in Android are target-densitydpi, but this attribute is deprecated after Android4.4, meaning that the property cannot be supported by packaging with Android SDK after 4.4
  • In Apicloud, the compilation environment uses more than 4.4 of the Android SDK, that is, does not support the target-densitydpi attribute, can not make the entire application refinement, many people find ways to implement 1px lines, through: after or: Before to add a 1px div, and then zoom to the div to achieve true 1px lines, but this is too cumbersome, and can not solve the problem of fillet, the other places have become 1px, the button is still coarse border, so more impact experience
  • Hbuilder was originally packaged in the API20 environment and does not support this property, but has recently been changed to API19, enabling support for this property, although Android has been officially abolished, but its role remains great.
  • Appcan has been packaged using the Android SDK environment of 4.4 or less and has been supported for this property, Someone once said Appcan use is Android2.3 engine, Apicloud use is 4.4 after the engine, so apicloud faster than appcan speed, these are only those who do not understand the people will say, now appcan speed is equivalent to even higher than apicloud how to explain? Look at my test essay, I'll know.

• Suggestions:
  • The developer pages using Hbuilder and Appcan must be added

  • <name= "Viewport"  content= "target-densitydpi=device-dpi, width= Device-width, initial-scale=1, User-scalable=no, minimum-scale=1.0, maximum-scale=1.0 ">

    To show the refinement of the interface, the layout of the use of EM to layout, because this setting after the PX at different resolutions to achieve the effect is not the same

  • In Apicloud layout using PX and EM on different devices The real difference is not very big
  • Also hope that Apicloud can adapt to the TARGET-DENSITYDPI attribute support, and not like the forum moderator asked why he abandoned the use of the property, said Android does not support, HTML5 the finalization of the attribute, said I am dead, since others can use, why you can not use, Abandonment does not mean that it can not be used, there are many ways to discard in Android, and some methods are still not used

Adaptive layout and unit (PX, EM) selection for mobile application development