Mobile Side FAQ Finishing

When using Iscroll, input and so on can not enter the content of the workaround

<script>function Allowformsiniscroll () {[].slice.call (Document.queryselectorall (' Input, select, Button ')]. ForEach (function (EL) {el.addeventlistener (' ontouchstart ' in window)? ' Touchstart ': ' MouseDown ', function (e) {e.stoppropagation ();}) })} document.addeventlistener (' domcontentloaded ', Allowformsiniscroll, false); </script>

Iscroll needs to listen to the user's touch operation so that it can respond sensitively, so it masks the rest of the default events.

When using Iscroll, can not use: focus{outline:0} pseudo-class, otherwise sliding card when the ipad page width of more than 980 is, the page is truncated content= "width=980 default 980, need to reset;

<meta name= "viewport" content= "width=1200, target-densitydpi=high-dpi, User-scalable=no"/>

The mobile browser often has a height of 100% rendering errors, the lower end of the page and the system comes with the navigation bar coincident, the height of the incorrect we need to reset the fix it

Document.documentElement.style.height = window.innerheight + ' px ';

Overlay area highlighting

Input, textarea, button, A{-webkit-tap-highlight-color:rgba (0,0,0,0);}

The default style of the button on iOS masks the weird inner shadow of the input box.

-webkit-appearance:none;border-radius:0

IOS and other Retina screen pictures a little hazy feeling according to "Pixel Rotio" set the picture size;

-webkit-background-size can do high-definition icons, but some low-version Android can only recognize Background-size

iOS, when you click for example input to prepare the virtual keyboard pop-up, the height of the entire window will be reduced to the height of the keyboard, adding you at the bottom of the fixed element such as BTN, this element will run up. When I was a focus, I set it: absolute; In some Android models, the input box may be redundant, after observation and testing, only the Input:password type of input box exists, so we just use input: The text type of the input box and-webkit-text-security:disc through the style; Hide the input password to resolve.

Android 4.0 version The following css:active pseudo-state effect is incompatible, we bind an empty anonymous method to the element's Touch Series event (Touchstart/touchend/touchmove):

var Element=document.getelementsbyid ("Btnshare"); Element.addeventlistener (' Touchstart ', function () {},false)

Mobile or PC short if the fixed element is used, the element is constantly rendering the problem; This can be viewed with Google Chrome developer-esc-esc-rendering-show paint rectangles

-webkit-transform:translatez (0);

Translatez can also fix some > character problems;

Reference URL

Http://www.ghugo.com/chrome-rendering-tools-1/, this is very good.

Http://blog.bingo929.com/transform-translate3d-translatez-transition-gpu-hardware-acceleration.html

Http://www.w3cfuns.com/article-1248-1.html

Mobile Side FAQ Finishing