Mobile Page Header parsing

Viewport (viewport)

Viewports control how webpages are displayed on a mobile device. If you do not specify a viewport, the mobile device renders the page with the width of the typical desktop screen and adjusts the page to fit the screen size. By setting up viewports, you can control the width and scale of web pages on different devices.
is the icon in the Safari developer Documentation:

ViewPort Mark

The ViewPort tag is used to specify whether the user can scale the Web page, and if so, what is the maximum and minimum zoom scale to. Using the viewport tag also means that the document is optimized for mobile devices. the content value of the ViewPort tag is a comma-delimited list of directives and their values.

Viewport Setup Example:

 
   
  

  
    
   
<meta name=‘viewport‘ content=‘user-scalable=no,width=device-width,minimum-scale‘/>
 
   
  

Content in the Android browser, we generally set this:

• Width: Specific value/device-width/
  Specifies the logical width of the viewport, either as a specific value or as a device screen width

• Height: Specific value/device-height
  Specifies the logical height of the viewport, either as a specific value, or as the screen height of the device

• User-scalable:yes/no
  Whether to allow users to scale pages

• Initial-scale:number
  Specify the initial zoom ratio of the page

• Maximum-scale:number
  Maximum scale the user can scale

• Minimum-scale:number
  The minimum scale the user can scale

• Minimal-ui: No value
  To hide the address bar and navigation bar when opening a Web page (the implementation of many Android browsers is different, safari depending on the system version can sometimes be full screen, sometimes no effect)

• Sets whether a webapp is displayed in full screen
  Test: normal page Test Invalid (5C)

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

• Setting is full screen
  Test: Invalid on safari (5C 6 Plus)

   
       
     
   
        
      
    <  meta name  =   "Apple-touch-fullscreen"   content  =   "no"  >   
   
        
      
     set whether to display full screen after adding to the home screen, This setting does not display full screen   
   
       
     
   

• Setting whether to format the
  Test: The test on an Android browser does not recognize the number originally, and safari can use the meta to avoid automatically identifying

   
       
     
   
        
      
    <  meta name  =   "format-detection"   content  =   "Telephone=no"  >   
   
        
      
     setting does not automatically recognize numbers as phone numbers   
    
       
     

• Apple-mobile-web-app-status-bar-style: Set status bar style
  Test: Invalid (5c,6 Plus)

   
       
     
   
        
      
    <  meta name  =   "Apple-mobile-web-app-status-bar-style"   content  =   "BLACK"  >   
   
        
      
     Set the status bar to black   
    
       
     

• Set Bookmark map
  Test: The Android browser uses this icon when tagging, but Safari uses the apple-touch-icon-precomposed specified when adding bookmarks
  
  

   
       
     
   
        
      
    <   =   "shortcut icon"   href  Span class= "pun" >=   "Http://g.tbcdn.cn/mui/global/1.2.35/file/favicon.ico"   type  =   "Image/x-icon"  > 
    
       
     

• Setting the Home screen diagram
  Test: Android Browser and Safari are all possible
  
  

    
       
     
  
     
        
      
  <link rel="apple-touch-icon-precomposed" href="http://img01.taobaocdn.com/tps/i1/T1zo51XxXfXXXeOHro-144-144.png">
    
       
     

From for notes (Wiz)

Mobile Page Header parsing