Mobile web development will encounter pitfalls (will be updated continuously), web

Mobile web development will encounter pitfalls (will be updated continuously), web

1. Adaptive first move

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />

If you find that your webpage cannot be adapted, check whether this line of code is missing. initial-scale controls the initial scaling ratio of the page and user-scalable controls whether the page allows scaling.

2. IOS allows full screen viewing

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

3. Ignore numbers as phone numbers

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

4. Remove Android's email address recognition

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

5. Remove URL control entries

setTimeout(scrollTo,0,0,0); 

6. Disable rotating devices

No way, IOS and Android cannot disable browser rotation in the browser.

7. Disable IOS keyboard auto-Capital

We know that in iOS, when a virtual keyboard pops up, the upper-case letter function is enabled on the keyboard by default. In some business scenarios, we may need to disable this function, the mobile version of webkit provides the autocapitalize attribute for the input element. By specifying autocapitalize = "off", the default upper Letter of the keyboard is disabled.

8. How to completely prohibit users from opening a page in a new window in iOS

-webkit-touch-callout:none;

9. Users cannot copy or save images in IOS.

-webkit-touch-callout:none;

10. Disable Text Selection for IOS

-webkit-user-select:none

11. Obtain the scroll bar height in IOS

In the desktop browser, the value of the scroll bar is obtained through document. scrollTop and document. scrollLeft. But in iOS, you will find that these two attributes are undefined. Why? Because there is no scroll bar concept in iOS, you can get the value of the scroll bar through these two attributes in Android. How can we get the value of the scroll bar in iOS?

Through window. scrollY and window. scrollX, we can get the values of the Y axis and the X axis scroll bar of the current window.

12. resolve border Overflow

width:100%;-webkit-box-sizing:border-box;

13. The keyboard is displayed by default after the focus is obtained in the input box.

<input type="tel" placeholder=""/>

Remember to use type = "tel" instead of type = "number"

14. input type = "number" Remove the up and down arrows

Chrome:

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{    -webkit-appearance: none !important;    margin: 0; }

In firefox:

input[type="number"]{-moz-appearance:textfield;}