Mobile notes--code sharing

The mobile side often encounters some small summary, convenient • Later use:

1. Turn off the iOS keyboard automatically capitalize the first letter

iOS, the default English input method state, the first letter is automatically capitalized, Autocapitalize properties can be implemented to close the first letter capital:

  <inputtype="text" autocapitalize="off"/>

2. Turn off iOS input auto-correction

and English input default automatic initial capitalization, iOS do a function, the default input method will turn on the automatic correction input, so that users often have to operate two times. So this feature is convenient and inconvenient, if some business does not need this function, can be closed through the front-end code.
<input type="text" autocorrect="off"/>

3. Suppress text scaling

The size of the text is recalculated when the mobile device is switched between the screen and the other, and is scaled accordingly, and when we don't need this, we can choose to disallow:

The property on the PC side has been removed, and the property must be set to ' meta viewport ' on the mobile side

  html{-webkit-text-size-adjust: 100%;}

4. How the mobile side clears the shadow in the input box

On iOS, the input box defaults to an inner shadow, but cannot be cleared using Box-shadow, which can be turned off if no shadow is needed:

 input,textarea border :  { 0 ;  /* 方法1 */ -webkit-appearance:  none ;  /* 方法2 */ }

5. Email address identification

On Android (not iOS), the browser will automatically recognize a string that looks like an email address, whether you have a link to it or not, and when you press and hold on the string, it pops up the message.

Turn off email address recognition < meta name = "format-detection" content : = "email=no" />

To turn on mail < a mailto:"[email protected]">[email protected]</ a > Sending:

6. Mobile Phone number identification

On IOS Safari (none of the other browsers and Android), the numbers that look like phone numbers are treated as phone links,

There may be other types of numbers that can be identified, but in a specific business scenario, there are times when this is not necessary, so you can turn off automatic recognition of your phone, and then turn on phone calls and text messages where you need to dial.

Turn off phone recognition < meta name = "format-detection" : content = "telephone=no" />

turn on the phone < a href = "tel:123456" function >123456</ : a >

To turn on the SMS feature < a href = "sms:123456" >123456</ a : >

7. Disable selection on the mobile side

If you don't want the user to be able to select the content on the page, you can disable it in the CSS (only WebKit support): div { -webkit-user-select:  none ; }

8. Remove touch highlighting from the mobile side

When you do the mobile page, you will find all a tags in the trigger click or all set Pseudo-class: Active elements, the default will be in the active state, the display of the Highlight box, if you do not want this highlight, then you can use the following CSS methods to suppress : .xxx { -webkit-tap-highlight- color : rgba(0, 0, 0, 0); }

9. How to disable saving or copying images

Do mobile H5 page, often step on a lot of pits, feel is also time to tidy up the mobile development notes, encountered problems can quickly respond to save development time. Mark a moment today. How to disable saving or copying images on the mobile side:

Usually when you press and hold the image img on your phone or pad, the option to store the image or copy the image will pop up, and if you don't want the user to do so, you can disable it in the following ways (iOS is active):

img {-webkit-touch-callout: none;}

10. Fast Rebound scrolling

Early, the mobile browser does not support the non-body elements of the scroll bar, so generally with the help of Iscroll;

.xxx { overflow :  auto ;  /* auto | scroll */ -webkit-overflow-scrolling:touch; }

Mobile notes--code sharing