Mobile-side layout considerations Learn One

0, Winphone system A, input tag is clicked when the translucent gray background how to remove

<meta name= "Msapplication-tap-highlight" content= "no" >

1. Turn off auto-capitalization of iOS keyboard first letter

<input type= "text" autocapitalize= "Off"/>

2. Prohibit text scaling

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

3. How to clear the shadow in the input box on the mobile side

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;
-webkit-appearance:none;
}

4, ignore the number of pages for the phone, ignoring email identification

<meta name= "format-detection" content= "Telephone=no, Email=no"/>

6. Disable selection on the mobile side

div {
-webkit-user-select:none;
}

8. How to prohibit saving or copying images

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:

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

9. Solve the problem that the font appears jagged after the mobile end is scaled down:

-webkit-font-smoothing:antialiased;

10. Grid layout:

box-sizing :border-box; You can change the way the box model is calculated to make it easier for you to set the width for an adaptive streaming layout

12, the button is pressed the implementation of the effect needs to add a a:active attribute to a tag and adding an empty function

Document.body.addEventListener (' Touchend ', function () {});

13. Remove the bottom border:

-webkit-border-bottom:none;

14, the English text wraps (does not divide the word):

Word-wrap :  Break-word

15, the font size as far as possible using PT or Em,rem, instead of PX.

16. Set the size of the placeholder font in input

::-webkit-input-placeholder{

font-size:10pt;

}

17, WAP page has an IMG tag, remember to add display:block; attributes to address the 1px pixels of an img's margin gap. If the picture to adapt to different phones to set width:100%; And you can't add a height.

For site font settings

Mobile-side projects:

Font-family:tahoma,arial,roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", sans-self;

Mobile and PC-side projects:

Font-family:tahoma,arial,roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", simsun,sans-self;

Mobile-side layout considerations Learn One