Transfer from http://my.oschina.net/cart/blog/282477
Do front-end development is not short, used jquery Mobile Jqmobi also pure hand-written.
The final summary is as follows:
JQuery Mobile: Suitable for chatty, high compatibility, full functionality, but the file is large, slightly bloated. If you are on the Web, the mobile version of the shared jquery library is suitable for use with jquery mobile.
Jqmobi: Suitable for a single mobile phone version of the station, small volume, fast, but compatibility without jquery mobile good, function does not have jquery mobile full, but generally enough.
However, if you are a simple mobile version of the small function, kill chicken with sledgehammer Ah, your handwriting can be.
Mobile version of the site to note that the structure of the form such as:
<! DOCTYPE html><Html><Head><Metacharset="UTF-8"/><meta content= name= "viewport"/>< Link rel= "Dns-prefetch" href= "//baidu.com"/><title>======</title></ Head><body></ body></HTML> Mobile version must be brought on
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1;" name="viewport" />
The following code is especially recommended if your site requires more than two CDN domains:
<link rel="dns-prefetch" href="//baidu.com"/>
Using the browser DNS pre-read function, greatly accelerate the speed of DNS resolution of your website, highly recommended.
Does web development use pixels, or percentages? Use pixel Design Web site: Site development Using pixel advantagesGeneral mobile phone version to 320PX to design your mobile version can be, using pixels has a benefit is on any device, the performance of the show will be more able to maintain the authenticity of your design, there will be no "unexpected" effect.
Website development using pixel disadvantageMultiple devices can not be intelligently adaptive.
Design a Web site using percentages: Site development use percent benefitsDifferent equipment can be adaptive, basic is very beautiful
Website development Use percent disadvantageDifferent equipment, in case there is a device width is not what you expect, adaptive and so will "accidental" fall, not beautiful, development, testing a little more difficult.
Finally, make a summary:
| <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] |
| " |
| /> |
Width
Controls the size of the viewport, you can specify a value or a special value, such as device-width as the width of the device (in pixels of the CSS when scaled to 100%).
Height
Corresponds to width, specifying the height.
target-densitydpi
A screen pixel density is determined by the screen resolution, usually defined as the number of dots per inch (dpi). Android supports three screen pixel densities: low pixel density, medium pixel density, high pixel density. A low-pixel-density screen has fewer pixels per inch, while a high-pixel-density screen has more pixels per inch. The default screen for Android browser and webview is medium pixel density.
The following is the range of values for the Target-densitydpi property
| <!--HTML Document-- |
| <meta name= "viewport" content= "target-densitydpi=device-dpi"/> |
| <meta name= "viewport" content= "target-densitydpi=high-dpi"/> |
| <meta name= "viewport" content= "target-densitydpi=medium-dpi"/> |
| <meta name= "viewport" content= "target-densitydpi=low-dpi"/> |
| <meta name= "viewport" content= "target-densitydpi=200"/> |
To prevent Android browser and WebView from scaling your page based on the pixel density of different screens, you can set the target-densitydpi of viewport to device-dpi. When you do this, the page will not scale. Instead, the page is displayed based on the pixel density of the current screen. In this case, you also need to define the width of the viewport to match the width of the device so that your page will fit on the screen.
Initial-scale
Initial scaling. That is, the initial zoom level of the page. This is a floating-point value, which is a multiplier of the page size. For example, if you set the initial zoom to "1.0", then the Web page will show up at 1:1 of the target density resolution. If you set it to "2.0", the page will be enlarged to twice times.
Maximum-scale
Maximum zoom. That is, the maximum allowable zoom level. This is also a floating-point value that indicates the maximum multiplier of the page size compared to the screen size. For example, if you set this value to "2.0", the page can be up to twice times larger than the target size.
User-scalable
The user adjusts the zoom. That is, whether the user can change the page zoom level. If set to Yes, the user is allowed to change it instead of No. The default value is yes. If you set it to No, then both Minimum-scale and Maximum-scale will be ignored because scaling is not possible at all.
All scaling values must be within the range of the 0.01–10.
Cases:
Mobile Web development experience sharing, mobile version of website Development Notes, website adaptation, mobile version of the website adaptive, mobile Android app Adaptive
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
