Mobile Learning Notes (i)

<meta name= "viewport" content= "width=device-width,user-scalable=no,initial-scale=.5,minimum-scale=.5, Maximum-scale=1 ">

Viewport viewport (visual area window)
The default is not set viewport general viewable area width on the mobile side is 980
Width of the viewable area (number| | Device-width)
User-scalable whether to allow user scaling (yes| | NO) iOS10 invalid (we put it in the event section to resolve)
Initial-scale Initial zoom ratio
Minimum-scale Minimum zoom ratio
Maximum-scale Maximum zoom ratio

HTML5 screen adaptation label settings:

<!--QQ Forced vertical screen -<Metaname= "X5-orientation"content= "Portrait" /><!--QQ Mandatory Fullscreen -<Metaname= "X5-fullscreen"content= "true" /><!--UC Force vertical screen -<Metaname= "Screen-orientation"content= "Portrait"><!--UC Force full screen -<Metaname= "Full-screen"content= "Yes"><!--UC Application Mode -<Metaname= "Browsermode"content= "Application"><!--QQ Application Mode -<Metaname= "X5-page-mode"content= "App"><!--windows Phone clicks No highlight -<Metaname= "Msapplication-tap-highlight"content= "No">

The format-detection attribute and meaning in the META tag:

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"/>

Here are the specific functions of each setting: First, telephone

You write a bunch of numbers without a link style, and the iphone will automatically add your text link style, and click on this number will automatically dial! Want to get rid of this dial-up link how to do it? Then our meta is prowess again, the code is as follows:

Telephone=no banned the conversion of numbers to dial-up links!
Telephone=yes turned on the number into a dial-up link, to turn on the conversion function, this meta will not have to write, in the default is the case is open!

Second, email

Tell the device not to recognize the mailbox and not send it automatically after clicking

Email=no prohibited as an email address!
Email=yes opened the text default to the email address, this meta will not have to write, in the default is the case is open!

Third, adress

Adress=no no jump to the map!
Adress=yes opens the function of clicking the address to jump directly to the map, in the default case it is open!

Mobile side Some style compatibility instructions:

Body * {    -webkit-text-size-adjust:100%;    /* Prohibit page text selection  in the event section to be compatible with Android */    -webkit-user-select:none;     /* Disable the Pop-up menu (active under iOS) when long press the page, and IMG and a tag are added */    -webkit-touch-callout   -webkit-touch-callout:none;  } A, input, button{    /* Disable highlighting, remove the next link in iOS or a clickable element defined by JavaScript, it will appear a translucent gray background *    /- Webkit-tap-highlight-color:rgba (0, 0, 0, 0);        /* Remove the native appearance of the input box and button, add this property on iOS to customize the style for the button and input box */    -webkit-appearance:none;    border-radius:0;}

Font boosting in a piece of text we did not set the height for him, under the WebKit kernel, the size of the text was enlarged by the browser

Workaround:
1. Setting the height
2. Set the maximum height max-height

The mobile side gets the root element font size:

(function () {  //Get HTML element  var html = document.documentelement;  Gets the width of the device  var hwidth = Html.getboundingclientrect (). width;  Console.log (' The width of the current device is: ' + hwidth + ' px ');        Gets the root element font size        html.style.fontSize = hwidth/16 + "px";}) ();

Mobile Learning Notes (i)