Mobile Development Learning Notes (i) Considerations for mobile development

Source: Internet
Author: User
Tags home screen

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.