Mobile development webapp development common meta settings mobile browser full screen mode, webappmeta

Mobile development webapp development common meta settings mobile browser full screen mode, webappmeta

1,WebApp full screen mode:

<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no, minimal-ui ">

Note: add minimal-ui after viewport to display the effect in safri.

<Meta name = "apple-mobile-web-app-capable" content = "yes"/>

 

2,Hide status bar/set status bar color:

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

 

3. safriDisplay title added to the main screen:

<Meta name = "apple-mobile-web-app-title" content = "app title">

 

4,Ignore automatically recognized numbers as phone numbers:

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

5,Ignore automatically recognized email accounts:

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

6,Full Screen Settings for common browsers:<! -- Uc force portrait --> <meta name = "screen-orientation" content = "portrait"> <! -- UC force full screen --> <meta name = "full-screen" content = "yes"> <! -- UC application mode --> <meta name = "browsermode" content = "application"> <! -- QQ Forced vertical screen --> <meta name = "x5-orientation" content = "portrait"> <! -- QQ forced full screen --> <meta name = "x5-fullscreen" content = "true"> <! -- QQ application model --> <meta name = "x5-page-mode" content = "app">

 

 

<! -- For some old browsers that do not recognize viewport, such as BlackBerry -->

<Meta name = "HandheldFriendly" content = "true">
<! -- Microsoft's old-fashioned browser -->

<Meta name = "MobileOptimized" content = "320">

For more information, click