I. About META
(i) common common meta attributes
1, viewport
<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
Width=device-width width is the width of the device screen (pixels) height=device-height height is the height of the device screen (in 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-scalable whether the user can scale manually
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 dialing function can write this!
As follows:
<ahref="tel:4008106999,1034">400-810-6999 转 1034</a>
Call the phone directly as follows
<a href="tel:15677776767">点击拨打15677776767</a>Click to dial the Apple phone will appear as: Android phone will be directly to the number input dial interface.
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: <meta http-equiv= "parameter" content= "parameter variable value" >; This property is very old property, the General mobile page is to have a certain cache, so this can not set, about more meta , take a look at one of my previous articles: Http://www.haorooms.com/post/html_meta_ds
(ii), 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. There is also a full-screen display of properties: For better compatibility, two meta can be written!
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).
Attention:
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).
(iii), iOS other private settingsTo add a home screen setting:
Picture one: In the site to protect
Picture two: Save to home screen
Picture three: Fill in the name
Figure Four: Styles in the home screen
Figure five: Start-up interface at startup
after adding the main screen, how to set the desktop picture and splash screen?
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! Settings for the splash screen: <link rel= "Apple-touch-startup-image" href= "Milanoo_startup.png"/> Of course, you can specify different sizes.
(iv), other browser private meta properties "unless special, it is generally not recommended"
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. Other
Optimized 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" >
Second, about the style
1, pull the scroll bar up and down, slow
Body {
-webkit-overflow-scrolling:touch;
Overflow-scrolling:touch;
}
2. Prohibit copying and selecting text
Element {
-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 back
element {
-webkit-touch-callout:none;
}
4. The default inner shadow of the input box under iphone and ipad
element{
-webkit-appearance:none;
}
5. Translucent gray matte when touching elements under iOS and Android
Element {
-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.
The following article has detailed introduction, address: Http://www.haorooms.com/post/phone_web_ysk
6. Active compatible processing
<body ontouchstart= "" >
7. Animation definition 3D hardware acceleration enabled
Element {
-webkit-transform:translate3d (0, 0, 0)
Transform:translate3d (0, 0, 0);
}
Note: 3D distortion consumes more memory and power
8.1px frame of Retina screen
element{
Border-width:thin;
}
9. When rotating the screen, the font size adjustment problem
HTML, 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 Bug
Some Android phone rounded corners fail
Background-clip:padding-box; Iii. about HTML5
some interesting new features in HTML5:
1. Canvas Elements for painting
2. Video and audio elements for media playback demo:<video width= "height=" controls= "Controls" >
Your browser does not support video
</video>: <audio controls= "Controls" >
Your browser does not support audio
</audio> 3, better support for local offline storage 4, geo-location navigator.geolocation.getCurrentPosition (callback,error,options)
5, new special content elements, such as article, footer, header, nav, section
6. New Form CONTROLS:
- Email
- Url
- Number
- Range
- Date pickers (date, month, week, Time, DateTime, datetime-local)
- Search
- Color
Mobile Development Learning Notes (i) Considerations for mobile development
