WebApp meta and device pixel ratio devicepixelratio

WebApp Meta

<!--fast mode with 360 browser enabled (WebKit) –--><meta name= "renderer" content= "WebKit" >
<!--prevent IE from using compatibility mode--
<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >
<!--optimized for handheld devices, mainly for older browsers that do not recognize viewport, such as BlackBerry--and
<meta name= "handheldfriendly" content= "true" >
<!--Microsoft's Vintage browser--
<meta name= "mobileoptimized" content= ">"
<!--UC Force vertical screen--
<meta name= "Screen-orientation" content= "Portrait" >
<!--QQ Forced vertical screen--
<meta name= "X5-orientation" content= "Portrait" >
<!--UC Mandatory fullscreen--
<meta name= "Full-screen" content= "yes" >
<!--QQ Mandatory fullscreen--
<meta name= "X5-fullscreen" content= "true" >
<!--UC Application Mode--
<meta name= "Browsermode" content= "Application" >
<!--QQ Application Mode--
<meta name= "X5-page-mode" content= "App" >
<!--this meta function is to delete the default Apple toolbar and menu bar--
<meta name= "apple-mobile-web-app-capable" content= "yes" >
<!--Web site to enable support for Web apps--
<meta name= "Apple-touch-fullscreen" content= "yes" >
<!--mobile phone number is not displayed as a dial-up link--
<meta name= "format-detection" content= "Telephone=no" >
<!--the color of the status bar (top bar of the screen) in Web Apps
<meta name= "Apple-mobile-web-app-status-bar-style" content= "Black" >
<!--windows Phone Click No Highlight--
<meta name= "Msapplication-tap-highlight" content= "no" >
<!--mobile Web pages automatically detect phone numbers--
<meta http-equiv= "X-rim-auto-match" content= "None" >

Mobileoptimized

<meta name= "mobileoptimized" content= "width" >

Mobileoptimized Mobile Optimization

Fit-to-screen website self-adapting screen

If the content value is less than or equal to the screen width of the Web site, the Fit-to-screen will be turned off and the site does not stretch with the browser

If the content value is greater than screen width;fit-to-screen will open

Viewport

<meta name= "viewport" content= "Width=device-width,height=device-height, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1, User-scalable=no "/>

The width and Height directives specify the logical width and height of the viewport, respectively. Their value is either a number in pixels or a special marker symbol. The width directive uses the device-width tag to indicate that the viewport width should be the screen width of the device. A similar height instruction uses the DEVICE-HEIGHT flag to indicate the viewport height for the device's screen height.

The user-scalable instruction specifies whether the user can scale the viewport, that is, the view of the Web page. Allows the user to zoom when the value is yes, no scaling is allowed when the value is no

The Initial-scale directive is used to set the initial zoom scale of a Web page. The default initial scaling value differs depending on the smartphone browser. Typically, the device renders the entire Web page in the browser, and setting it to 1.0 displays the Web document without scaling.
The Maximum-scale and Minimum-scale directives are used to set user limits on the scale of web pages. Values range from 0.25 to 10.0. As with Initial-scale, the values of these directives are the scale that is applied to the viewport content.

2. Apple-mobile-web-app-capable
1. <meta name= "apple-mobile-web-app-capable" content= "yes" >
6. Whether to start the WebApp feature set to Yes site will be in full screen mode full-screen the default Apple toolbar and menu bar
Format-detection

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

<meta name= "format-detection" content= "Email=no"/>

The iphone will automatically add your text to the link style, and clicking on this number will automatically dial!

Telephone=no the number identified as the phone number in the page

Telephone=yes turned on the number into a dial-up link, the default is the case is open! Status-bar-style

<meta name= "Apple-mobile-web-app-status-bar-style" content= "Default"/>
<meta name= "Apple-mobile-web-app-status-bar-style" content= "Black"/>
<meta name= "Apple-mobile-web-app-status-bar-style" content= "Black-translucent"/>

1. Control status bar display style default (white) Black (black) black-translucent (gray translucent)
Link Label Apple-touch-icon

 

If apple-mobile-web-app-capable set to True yes , you can add a Web site to the home screen using the Add to Home button on safari iphone,ipad,itouch.

By setting the appropriate apple-touch-icon label, the icon added to the main screen will use the image we specified.

Here are the different devices for the ox, choose an optimal icon. The default iphone size is 60px,ipad for the 76px,retina screen multiplied by twice times.

<link rel="apple-touch-icon" href="touch-icon-iphone.png"><link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png"><link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png"><link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

iOS7 previously the system will add special effects (fillets and highlights) to the icon, if you do not want the system to add effects, you can use apple-touch-icon-precomposed.png insteadapple-touch-icon.png

The icons use the following priority levels:

• If you do not have an icon that matches the recommended size of the device, it will take precedence over the recommended size but closest to the recommended size.
• If there is no icon larger than the recommended size, the icon closest to the recommended size is preferred.
• If more than one icon fits the recommended size, the icon that contains the keyword precomposed will be selected first.

If you do not specify an icon in the zone with the link label, apple-touch-icon the PNG icon prefixed with the Web site root is automatically searched.

Note: iOS7 no longer adds effects to icon, iOS7 previously added effects to icon unless the icon has a keyword -precomposed.png suffix. Devicepixelratio

Window.devicepixelratio is the ratio of physical pixels and device independent pixels (device-independent pixels (dips)) on the device.
The formula means: Window.devicepixelratio = physical pixels/Dips

WebApp meta and device pixel ratio devicepixelratio