Mobile problem Summary [2015-11]

1: Gets the value of the scroll bar:

window.scrolly  WINDOW.SCROLLX

The value of the scroll bar that you want to get in the desktop browser is obtained through document.scrolltop and Document.scrollleft, but in iOS you will find that the two properties are undefined and why? Because there is no scroll bar concept in iOS, the values of the scroll bar can be obtained by using these two properties in Android, so how do we get the value of the scroll bar in iOS? Is the above two properties, but it turns out that Android also supports this attribute, so simply use Woindow.scroll.

2: Disable text selection:

-webkit-user-select:none

Prohibit users from selecting text, both iOS and Android support

3: Mask Input box Shadow:

-webkit-appearance:none

You can also block the strange inner shadow of the input box, to resolve the button style cannot be modified under iOS

4:retina Screen HD Image:

selector {  background-image:url (no-image-set.png);  Background:image-set (URL (foo-lowres.png) 1x,url (foo-highres.png) 2x) Center;}

Image-set syntax, similar to different text, images will also be displayed in different ways:

1. Image-set is not supported: in browsers that do not support image-set, he will support background-image images, which means that image-set browsers are not supported. They parse the background image in the background-image;
2. Support Image-set: If your browser supports Image-sete, and it is a normal display screen, then the browser will select the @1x background image in Image-set;
3. Image-set under the retina screen: If your browser supports Image-set and is under the retina screen, the browser chooses the @2x background image in Image-set.

5:HTML5 Gravity Sensing Event:

If (window. devicemotionevent) {                  window.addeventlistener (' devicemotion ', Devicemotionhandler, false);          }         var speed = 30;//speed        var x = y = z = lastx = lasty = Lastz = 0;        function Devicemotionhandler (eventData) {            var acceleration =event.accelerationincludinggravity;                x = acceleration.x; y = acceleration.y; z = acceleration.z; if (Math.Abs (X-LASTX) > Speed | | Math.Abs (y-lasty) > Speed | | Math.Abs (Z-LASTZ) > Speed ) {//simple shake to Trigger code alert (1);} lastx = x; lasty = y; lastz = Z;} 

About Devicemotionevent is the HTML5 new event, used to detect the mobile phone gravity sensor effect specific reference http://w3c.github.io/deviceorientation/spec-source-orientation.html

6: Mobile photos and uploading pictures

<input type= "File" > 's Accept Property

<!--select photo--><input type=file accept= "image/*" ><!--Select video--><input type=file accept= "video/*" >

Mobile problem Summary [2015-11]