Mobile End WebApp Development Basics

(1) CSS pixels and device pixels

CSS Pixels: The abstract unit used by the browser, used primarily to draw content on a Web page.

Device pixels: Displays the smallest physical unit of the screen, with each DP containing its own color and brightness.

The equivalent CSS pixels on the phone screen, which is not fixed, depending on a lot of properties. After analysis and summary, we can draw such a formula: 1 CSS pixels = (devicepixelratio) ^2 device pixels.

(2) ppi/dpi

The PPI, sometimes called dpi, represents the number of pixels (pixel) per inch, the higher the value, which means that the display can display the image at a higher density. (Note: The pixels here refer to device pixels.) Figuring out what the PPI means, we can easily understand how the PPI is calculated, we need to figure out the diagonal equivalent of the cell phone screen, and then we can get the PPI by the diagonal (the length of the diagonal of the phone screen, which is what we normally call screen size). Accurate calculation of the publicity can be referred to. Interestingly, the PPI for the iphone 4, based on the formula, is 330, a little higher than the official Apple announcement of 326.

(4) Use of viewport

Control display area Various properties:

<meta content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name= "viewport" >

Viewport a total of 5 properties, respectively:

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] "/>

• width                     &NB sp;-viewport width

• height               &N Bsp    –viewport height

• initial-scale         &NBS p;-Initial scaling

• minimum-scale  -allow user to zoom to the minimum scale

• maximum-scale– the maximum scale that the user is allowed to zoom to

• user-scalable      – Whether the user can manually scale the

         target-densitydpi This property can change the default scaling of the device. MEDIUM-DPI is the default value for target-densitydpi, and if we explicitly define TARGET-DENSITYDPI=DEVICE-DPI, then the device renders the page at a real dpi. For example, a 320*480 picture, placed in the iphone4, the default is full screen, but if defined target-densitydpi=device-dpi, then the picture only occupies One-fourth of the screen (One-second Square), Because the resolution of the iphone4 is 640*960.

Safari in iOS allows full screen browsing:

<meta content= "yes" name= "apple-mobile-web-app-capable" >

Safari Top status bar style in iOS:

<meta content= "Black" name= "Apple-mobile-web-app-status-bar-style" >

Ignore turning numbers into phone numbers:

<meta content= "Telephone=no" name= "Format-detection" >

In general, iOS and Android will default to a certain length of number as the phone number, even if not added will default to display as the phone, so, cancel this is necessary!

The Safari settings in iOS are saved to the desktop icon:

This is the unique meta of safari in iOS, which is used when you save a page to the desktop as a desktop icon, so, size and consistent on iphone, is 57*57px

<link rel= "Apple-touch-icon" href= "Custom_icon.png" >

Second, the solution

(1) Simple rough

          If we make the page in 320px wide design, and do not make any settings, the page will automatically zoom to the width equal to the phone screen (this is because MEDIUM-DPI is the default value of target-densitydpi, and different densities correspond to different scaling ratios, All of this is done automatically by mobile devices). So this solution is simple, rough and effective. But there is a fatal drawback, for high-density and ultra-high-density mobile devices, pages (especially pictures) will be distorted, and the more dense, the more distorted.

(2) Ultimate Perfection

        

(3) Moderate response

The vast majority of Android devices are high density, part of the density of the features, we can use a compromise scheme: we have 480px wide design manuscript to restore, but the page made of 320px wide (using background-size to reduce the image), and then, Let the page scale automatically by scaling. This way, low-density mobile phones have a scroll bar (which is basically no longer used), the density of mobile phones will waste a little bit of traffic, high-density mobile phone perfect, ultra-high-density mobile phone slightly distorted (ultra-high-density Android phone very few). The advantages of this scheme are obvious: only a set of design drafts, a set of code (this is just about Android phones).