Summary of some front-end knowledge collection in mobile Web development

In the development of Devemobile and Easemobile theme, accumulated a number of mobile web development of the front-end knowledge, the purpose of the summary of the record, close-up this article to forget about.

There is no difference between mobile web development and traditional PC-side development, but thanks to Apple's drive for smartphones, CSS3+HTML5 can use it almost without scruple, and then the browser considers the WebKit kernel almost.

WebKit some private meta tags in the kernel

1234

<meta name="apple-mobile-web-app-capable" content= "yes"><meta Span style= "Color:rgb (0, 0, 102); >name = "viewport" content = " Span style= "Color:rgb (255, 0, 0); > "Width=device-width, initial-scale=1.0, maximum-scale=1.0, User-scalable=no" /; <meta name="Apple-mobile-web-app-status-bar-style" content = "BLACK" /><meta name="apple-mobile-web-app-title" content = "test App">

The first meta tag is the safari private meta tag in the iphone device, which says: Allow full-screen mode to browse, on iOS, when the user adds a webpage to the home screen, and then opens the page from the home screen, you can hide the browser's address bar and the following toolbar;

The second meta tag indicates that the width of the document is forced to remain 1:1 with the width of the device, and the maximum width of the document is 1.0, and the user is not allowed to click on the screen to enlarge;

The third meta tag is also the iphone's private label, which specifies the style of the status bar for Safari top in the iphone, with a value of three: Default, Black, Black-translucent.

The fourth meta tag refers to the default naming when sent to the screen.

There are other meta tags that show the meaning directly in the comments:

12	<meta content="telephone=no" name=" Format-detection " /> <!--tell the device to ignore the numbers in the page as a phone number--<meta content="email=no" name="format-detection " /> <!--don't let Android recognize your mailbox --

Customize icons on the home screen

After the user is added to the home screen, if the site does not have an icon, the icon on the default home screen is the current page, and you can specify the icon on the normal and retina screens by using the following code:

12	<link Span style= "Color:rgb (0, 0, 102); >rel = " Apple-touch-icon " sizes "72x72" href = ; <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-precomposed.png">

Add an initialization picture

When the user clicks on the icon of the WebApp on your desktop, the open will load the browser (actually the WebKit webview module), then download, parse, Render, and in the process, iOS allows us to use an initialized image to replace the White browser screen:

123

<link Span style= "Color:rgb (0, 0, 102); >rel = " Apple-touch-startup-image " sizes "320x460" href = "Imgs/setupimg320.png" /; <link Span style= "Color:rgb (0, 0, 102); >rel = " Apple-touch-startup-image " sizes "640x920" href = "Imgs/setupimg640.png" /; <link rel="apple-touch-startup-image" sizes="640x1096" href="images/setupimg5.png" />

You can read more about the two articles, "Make your site an IOS Web App," "Touch Icons in Ios/android Mobile."

Turn off keyboard auto-capitalization, AutoCorrect, auto-completion in iOS

In iOS, when the virtual keyboard pops up, by default the keyboard is the first capitalization feature, depending on the business scenario, we may need to turn this feature off, mobile version WebKit provides the autocapitalize attribute for the INPUT element, Turn off the default initial capitalization of the keyboard by specifying autocapitalize= "off". There are also automatic corrections, auto-completion to you can cancel:

1	<input AutoCorrect="Off" autocomplete="Off" autocapitalize="Off" >

File upload, capture media from camera

123	<input type="file" accept = "image/*; Capture=camera " /><input type="file" accept = "video/* ; Capture=camcorder " /><input type="file" accept = "audio/*; Capture=microphone " />

Phone SMS

123	<a href="sms:18888886666,18888885555″]]> Send text messages to many people's links<a href="sms:18888886666?body=sms txt"] ]>Send a link to a text message that comes with content<a href="tel:18888886666"] ]>Call us at 18888886666</a] ]>Call a link

Remove the default button style from IOS

In iOS, all the buttons (input) are forced by default to have a fillet and gradient style (IOS7 's unknown), to remove this default style, with the following code (recommended to add directly to reset):

1	Input{-webkit-appearance:none; Outline : None ; }

An issue that resets the font size when the IOS browser is flat screen

iOS browser will reset the font size when you screen, set Text-size-adjust to None to solve the problem on iOS, but the desktop version of Safari font scaling function will be invalidated, so the best solution is to Text-size-adjust to 100%.

123	-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; Text-size-adjust:100%;

CSS3 's transition splash screen problem

Use the CSS3 animation as much as possible with 3D acceleration, which makes the animation smoother (refer to the "Off Canvas navigation in Mobile Web development" article). Animated Flash in the process can be hidden through backface-visibility.

12	-webkit-transform-style: preserve-3d; / * Set the embedded elements in 3D space how to render: Reserved 3d*/-webkit-backface-visibility:hidden; /* (sets whether the reverse side of the element being converted is visible when facing the user: hidden) */

Miscellaneous for other CSS

1234

-webkit-tap-highlight-color: Transparent; /*mobile Click on the link highlighted when the color is set to transparent * /-webkit-user-select: None; / * Set to cannot select text * /-webkit-touch-callout: None; /* Long time does not trigger the System menu (prohibit iOS pop-up various action windows), can be used to add this property on the picture prohibit download picture * *-webkit-overflow-scrolling:Touch;/* Fast scrolling and rebound to simulate native app effects */

Click event

The Touchstart event is recommended for iOS Safari's Click event, which has a noticeable delay when the screen is briefly pressed (relative to the moment the user's hand leaves the screen, about 300ms). Alternatively, using the encapsulated tap event instead of the Click event, the so-called Tap event consists of the Touchstart event + Touchmove + Touchend event package.

Other JS Misc

12345678

Window.ScrollTo(0,0); / * Hide the Address bar * /Window.Matchmedia(); / * Match media * /Navigator.Connection; / * Determine if the phone is running on a network such as wifi/3g * /Window.Devicepixelratio; /* Determine screen resolution (IPhone 4 value is 2 and Nexus One value is 1.5) */Window.Navigator.OnLine; / * Get network Connection Status * /Window.Navigator.Standalone; / * Determine if iphone is in full screen touch event (IOS, Android 2.2+): Touchstart, Touchmove, Touchend, touchcancelgesture events (Apple only, IOS: Gesturestart, Gesturechange, gesturend give access to predefined gestures (rotation, scale, position)