Mobile development in the need to pay attention to things, and may need to use some framework, the tail summarizes a number of mainstream framework, if you feel useful, please click on the recommendation, thank you!
I. About META
Common public meta attributes:
1, viewport
<meta name= "viewport" content= "width-device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0, User-scalable=0 ">
- Width=device-width width is the width of the device screen (in pixels)
- Height =device-height height of the device screen (pixels)
- Initial-scale Initial zoom ratio
- Minimum-scale allows the user to zoom to the minimum scale
- Maximum-scale allows the user to zoom to the maximum scale
- User-scaleable whether the user can manually scale
2, Format-detection
Format-detection translated into Chinese means "format detection", as the name implies, it is used to detect some of the HTML format, the Format-detection property about meta is mainly the following several settings:
- Meta name= "format-detection" content= "Telephone=no"
- Meta name= "format-detection" content= "Email=no"
- Meta name= "format-detection" content= "Adress=no"
- You can also ligatures: Meta name= "format-detection" content= "Telephone=no,email=no,adress=no"
- If disabled, we call the dialing function can write this!
As follows:<a href="tel:4008106999,1034">400-810-6999 转 1034</a>
- Call the phone directly as follows
<a href="tel:15677776767">点击拨打15677776767</a>
The Android phone will enter the dialed interface directly to the number.
Clicking on the dial-up Apple phone will appear as:
3, Http-equiv
- Http-equiv, as the name implies, is equivalent to the HTTP file header function, it can send back some useful information to the browser to help correct and accurate display of the content of the Web page, and the corresponding property value of content,content content is actually the variable value of each parameter. The Http-equiv property syntax format for the meat tag is:
- This property is very old property, the General Mobile Web page is to have a certain cache, so this can not set
Second, iOS private meta attribute<meta name= "apple-mobile-web-app-capable" content= "yes"/><meta name= "Apple-mobile-web-app-status-bar-style" content= "Black"/>
1. The First meta:<meta name= "apple-mobile-web-app-capable" content= "yes"/>Description:
- Web App support is enabled on the Web site.
- If the content is set to yes,web the app will run in full-screen mode, or vice versa. The default value for content is no, which indicates normal display. You can use the read-only property window.navigator.standalone to determine whether a Web page is displayed in full-screen mode.
- For better compatibility, two meta can be written on!
2. Second meta:<meta name= "Apple-mobile-web-app-status-bar-style" content= "Black"/>Description:
- The color of the status bar (the top bar of the screen) in the web App app;
- Defaults are default (white), which can be set to Black (dark) and black-translucent (gray translucent).
- Note: A value of "Black-translucent" will occupy the page px position, floating above the page (will cover the page 20px height –iphone4 and itouch4 Retina screen is 40px).
Third, iOS other private settings
after adding the main screen, how to set the desktop picture and splash screen? 1, Desktop Icon settings:<link rel= "Apple-touch-icon" href= "Touch-icon-iphone.png"/>
<link rel= "apple-touch-icon-precomposed" href= "Touch-icon-iphone.png"/>the difference between the two is as follows:the first one will have a light sense, the second is the design of the original display! 2, the Start screen settings:<link rel= "apple-touch-startup-image" href= "Milanoo_startup.png"/>of course, you can specify different sizes.
Iv. Other browser private meta properties "generally not recommended unless special"
1, QQ browser private
- Full screen mode: <meta name= "X5-fullscreen" content= "true" >
- Force vertical screen: <meta name= "X5-orientation" content= "Portrait" >
- Force horizontal screen: <meta name= "x5-orientation" content= "Landscape" >
- Application Mode: <meta name= "X5-page-mode" content= "App" >
2. UC Browser Private
- Full screen mode: <meta name= "Full-screen" content= "yes" >
- Force vertical screen: <meta name= "Screen-orientation" content= "Portrait" >
- Force horizontal screen: <meta name= "screen-orientation" content= "Landscape" >
- Application Mode: <meta name= "Browsermode" content= "Application" >
3. Otheroptimized for handheld devices, mainly for older browsers that do not recognize viewport, such as BlackBerry
<meta name= "handheldfriendly" content= "true" >
Microsoft's old-fashioned browser
<meta name= "mobileoptimized" content= "> "
windows Phone clicks No highlight
<meta name= "msapplication-tap-highlight" content= "no" >v. About Style
1, pull the scroll bar up and down, slowBody {
-webkit-overflow-scrolling:touch;
Overflow-scrolling:touch;
}
2. Prohibit copying and selecting textElement {
-webkit-user-select:none;
-moz-user-select:none;
-khtml-user-select:none;
User-select:none;
}
Resolve mobile devices to select page text (depending on product needs)
3, long time to press and hold the page flash backelement {
-webkit-touch-callout:none;
}
4. The default inner shadow of the input box under iphone and ipadelement{
-webkit-appearance:none;
}
5. Translucent gray matte when touching elements under iOS and AndroidElement {
-webkit-tap-highlight-color:rgba (255,255,255,0)
}
set the alpha value to 0 to remove the translucent gray matte, note: The Transparent property value is not valid under Android.
6. Active compatible processing<body ontouchstart= "" >
7. Animation definition 3D hardware acceleration enabledElement {
-webkit-transform:translate3d (0, 0, 0)
transform:translate3d (0, 0, 0);
}
Note: 3D distortion consumes more memory and power
8.1px frame of Retina screenelement{
Border-width:thin;
}
9. When rotating the screen, the font size adjustment problemHTML, body, form, fieldset, p, Div, H1, H2, H3, H4, H5, h6 {
-webkit-text-size-adjust:100%;
}
10. Transition splash Screen/Set How embedded elements are rendered in 3D space: Reserved 3D/
-webkit-transform-style:preserve-3d; /sets whether the back of the element to be converted is visible when facing the user: Hidden/
-webkit-backface-visibility:hidden;
11. Fillet Bugsome Android phone rounded corners fail
Background-clip:padding-box;Vi. about HTML5
some interesting new features in HTML5:
1. Canvas Elements for painting
2. Video and audio elements for media playbackDemo:<video width= "height=" controls= "Controls" >
your browser does not support video
</video> similarly:<audio controls= "Controls" >
your browser does not support audio
</audio>
3. Better support for local offline storage
4. Geo-positioning navigator.geolocation.getCurrentPosition (callback,error,options)
5, new special content elements, such as article, footer, header, nav, section
6. New Form controls:
- Email
- wr.
- Number
- Range
- Date pickers (date, month, week, Time, DateTime, datetime-local)
- Search
- Color
Vii. Mobile Development-Popular framework1, Jquerymobile
- Website: http://api.jquerymobile.com/
2. App Framework
- Website: http://app-framework-software.intel.com/
3, Senchtouch
- Website: http://www.sencha.com/
4. Mobile Angular UI
- Website: http://mobileangularui.com/docs/
5, PhoneGap
- Website: http://phonegap.com/
6, Appcan
- Website: http://www.appcan.cn/
7, Sister UI
- Website: http://amazeui.org/
8, Baidu GMU
- Website: http://gmu.baidu.com/
Mobile front-end development IDE
- I'm using a webstorm.
- The more popular is the sublime
Front-end development environment
- After the frontend is done, the page is bound according to the interface returned by the background (that is, the set of pages we usually say).
- If the background is written in Java, we need to build the Java environment
- If the background is written by PHP, we need to build PHP environment.
Tochweb (mobile website)
Web-app (PhoneGap appcan Pack cheer Android apk and Apple iOS format)
Hybrid-app (Mainstream)
Native-app
Viii. Mobile-Mainstream CSS framework1. Bootstrap-Responsive layout
2. CSS3 Animation
- Website: http://www.haorooms.com/uploads/example/Animatecss/
- More Frames: http://nec.netease.com/framework
3. Icon Font
- Website: http://fontawesome.io/
- Website: http://www.iconfont.cn/
4. CSS sass and less frameworksNine, mobile-mainstream JS framework1, Zeptiojs
- Website: http://zeptojs.com
2, Jgestures
- Website: http:jgestures.codeplex.com/
3, Swiper
- Website: http://www.swiper.com.cn
4, Iscroll.js
- Website: http://cubiq.org/iscroll-5
- Website: http://iscrolljs.com/
Mobile Developer Considerations
