Mobile Web Development Note-Points

No need to consider browser compatibility

The main object of mobile development is handheld devices, most of which are iOS and Android systems, so, while developing such pages without having to tangle with the compatibility of IE and some other 2B browsers, WebKit is the focus of this development.

Of course, there are some problems with different versions of Android, and there are some differences between versions of different browsers, and iOS is doing very well.

So in development we just need to use chrome for debugging, but Chrome's developer tools are also very gray.

Rich page meta

Control display area Various properties:

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

• mobile Web Development note width             & nbsp        –viewport width
• height   & nbsp                –viewport height
• initial-scale          – initial zoom scale
• maximum-scale– allows the user to zoom to the maximum scale

Safari in iOS allows full screen browsing:

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

Safari Top status bar style in iOS:

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

Ignore turning numbers into phone numbers:

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

<content= "Telephone=no"  name= "format-detection"> 

content=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

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

Powerful CSS Properties Box-flex

This is a large column because this property is very useful and very similar to the grid that was used to develop the Win8 app.

The role of Box-flex is divided by percentage brother the same label width, that is, when UL has a two Li, each Li will automatically divide the width of the UL, if box-flex:1; At this point, Li's width is 50%

Box-flex The first example of usage:

<ul>     <Li>11111</Li>     <Li>2222222</Li>     <Li>333333333</Li></ul>ul{display:-webkit-box;} UL Li{-webkit-box-flex:1;}

Display results (with WebKit Core browser, such as Chrome, below):

Box-flex The second example of usage:

<Divclass= "Demo02">    <inputplaceholder= "Hundred percent width input box"type= "text"></Div><styletype= "Text/css">. demo02{Display:-webkit-box;}. demo02 input{-webkit-box-flex:1;width:100%;padding:4px;Height:18px;Line-height:18px;Border-style:Solid;Border-width:1px;Border-color:#ddd #ccc #ccc #ddd;}</style>

From the evil group of the main side pit point article, resolutely do not do low goods!

Mobile Web Development Note-Points