A summary of mobile web issues

META Tags:

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

This presumably everyone knows that when the page is displayed on the phone, adding this meta allows the page to force the width of the document to remain at 1:1 of the width of the device, and the maximum width of the document is 1.0, and does not allow the user to click on the screen to enlarge the view.

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

These two properties limit the automatic recognition of phones on iOS and the automatic recognition of mailboxes on Android.

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.

Suppress text selection:

-webkit-user-select:none

Prohibit users from selecting text, both iOS and Android support

Shielding Shadows:

-webkit-appearance:none

Pro-Test, you can also block the input box strange inner shadow, to solve the iOS cannot modify the button style, the test also found that a small problem is that the above attributes, iOS default or with rounded corners, but you can use the Border-radius property modification.

CSS's Border-box:

element   {width :  100 %  ; padding-left :  10  px  ; box-sizing : border-box        ; -webkit-box-sizing :         Border-box  ; border :   1  px solid blue  ;     

So I want an element 100% display, and must have a fixed padding-left/padding-right, and a 1px border, how to do? So writing code will inevitably result in a horizontal scroll bar, swollen? Believe that the problem is to be solved. At this time the great CSS3 for us to provide the Box-sizing property, the specific explanation of this property do not repeat (want to learn more about the students can go to W3school to see, to know that their hands will be easier to remember). Let's look at how to solve the above problem:

CSS3 Multiple Text wrapping:

p{    overflow : hidden;    text-overflow: ellipsis;    display: -webkit-box;    -webkit-line-clamp: 2;    -webkit-box-orient: vertical;}

WebKit supports a property called-webkit-line-clamp, see links, which means that this property is not part of the standard, it may be a property used internally by WebKit, or deprecated. It is important to note that display needs to be set to Box,-webkit-line-clamp to indicate that several lines need to be displayed.

Retina Screen HD Picture:

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:
Does not support Image-set: in the browser does not support Image-set, he will support background-image images, that is, Image-set browser is not supported, they parse background-image background image;
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;
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.

HTML5 Gravity Sensing Event:

if(Window. Devicemotionevent) {Window.addeventlistener (' Devicemotion ', Devicemotionhandler,false); }varSpeed = -;//speed        varx = y = z = lastx = lasty = Lastz =0; function devicemotionhandler(eventData) {            varAcceleration =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 codeAlert1);                } 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

Mobile-side Touch events:
Touchstart//triggers when finger touches the screen
Touchmove//triggers when a finger that has touched the screen begins to move
Touchend//triggers when the finger leaves the screen
touchcancel//triggered when a touch event is not over the normal end
The sequence of triggering for these 4 events is:
Touchstart, Touchmove, Touchend->touchcancel
For some Android system touch bugs:
For example, when a finger drags a page down the screen, it is theoretically triggered by a touchstart, many times touchmove, and the final touchend, but on Android 4.0, Touchmove is triggered only once, triggering time and Touchstart Almost, and touchend is not directly triggered. This is a very serious bug, in Google issue has been put forward, this very painful bug is in the simulated pull-down refresh is encountered especially when the number of DOM nodes Touchmove is more than the occurrence, The solution was to dilute touchmove with settimeout.

Click Delay:
The Click event is not very good because there is a 300ms delay to wait for a double-click confirmation.
Most developers use encapsulated TAP events instead of click events, so-called tap events consist of Touchstart event + Touchmove + touchend event encapsulation.
Creating Fast Buttons for Mobile Web applications
Eliminate 300MS Delay on click events in Mobile Safari

Fixed text box focus centered in iOS

<! DOCTYPE html>    <head>input {position:fixed;    top:0;left:0; }</head>    <body>        <div class="header">            <form Action="">                <label>Testfield:<input type="text" /></label>            </form>        </div>    </body></html>

In iOS, when the style of a text box is fixed, if the text box has the focus, its position will be lost, because the iOS is self-adaptive centering, the fixed text box will run to the middle of the page.
There are two solutions:
You can change the fixed to absolute when the text box has the focus, but not when you lose focus, but this will make the screen slide up and down the experience is not very good.

.fixfixed {position:absolute;}$(document)    .on(‘focus‘‘input‘function(e) {        $this.addClass(‘fixfixed‘);    })    .on(‘blur‘‘input‘function(e) {        $this.removeClass(‘fixfixed‘);    });

Another is to put a fake fixed text box at the top of the page, a absolute text box hidden at the top of the page, when the fixed text box to get the focus of the time to hide it, and then display the absolute text box, when the focus is lost, the absolute text box is hidden , the fixed text box is displayed.

.fixfixed {position:absolute;}$(document)    .on(‘focus‘‘input‘function(e) {        $absolute..show();        $this.hide();    })    .on(‘blur‘‘input‘function(e) {         $fixed..show();        $this.hide();    });

The last one is that the top input does not participate in scrolling, just let it scroll underneath.

Position:sticky
Position:sticky is a new CSS3 property that behaves like Position:relative and position:fixed, and behaves as if it were position:relative when the target area is visible in the screen. When the page scrolls beyond the target area, it behaves like a position:fixed, which is fixed at the target location.

.sticky{ position: -webkit-sticky; position:sticky; top: 15px; }

Browser compatibility:
Since this is a completely new attribute, so far there is no specification, the consortium has just begun to discuss it, and now only the WebKit nightly version and the Chrome 23.0.1247.0+ Canary are starting to support it.
It is also important to note that if both left and right values are defined, then left is in effect and right will not be valid, as well as defining top and Bottom,top win ~ ~
Mobile Endpoint Penetration Event
Simply put, because on the mobile side we often use tap (Touchstart) events to replace the Click event, then there is a scenario is:

<div id="mengceng"></div><a href="www.qq.com">www.qq.com</a>

Div is an absolutely positioned mask z-index is higher than a, and a tag is a link in the page where we bind the tap event to the DIV:

$(‘#mengceng‘).on(‘tap‘,function(){$(‘#mengceng‘).hide();});

The div normally disappears when we click on the mask, but when we click on the mask on the a tag, we find that a link is triggered, which is called a point-through event.
Reason:
Touchstart earlier than touchend earlier than click. That is, the click Trigger is a delay, the time is about 300ms, that is, we tap to hide after the mask, when the click has not been triggered, after 300ms due to mask hidden, our click triggered to the following a link.
Workaround:
1 Use the touch event as much as possible to replace the Click event.
2 Block A-linked click of the Preventdefault

Base64 encoded picture Replace URL picture
U on the mobile side, the network request is very precious resources, especially in the 2g or 3g network, so can not send the requested resources to try not to send, for some small picture icon and so on, you can use the image Base64 encoding, to reduce network requests.

Mobile photos and uploading pictures

<!-- 选择照片 --><input type=file accept="image/*"><!-- 选择视频 --><input type=file accept="video/*">

Turn on hardware acceleration when animating effects
We often want to create the animation effect of the top or left of the element to let the elements move, at the PC side fortunately, but the mobile side will have a greater sense of CSS3, so we need to use the Transform:translate3d;
This effect allows the browser to turn on GPU acceleration, rendering smoother, but with a good experience on iOS while the pen is experimenting, there may be unexpected effects on some low-end Android models.

Fast rebound scrolling
On iOS If you want an element to have a scrolling effect like Native, you can do this:

.div{        overflow: auto;        -webkit-overflow-scrolling: touch;    }

Tested with a pen, this effect is inconsistent on different iOS systems,
For partial scrolling, iOS8 above, do not add this effect, scroll super slow, iOS8, do not add this effect, scrolling is relatively smooth
For body scrolling, iOS8 above, do not add this effect also has an elastic scrolling effect.

Continuous update in:

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

A summary of mobile web issues