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 must all be known that when the page is displayed on the phone, adding this meta allows the page to force the width of the document to remain 1:1 of the width of the device. and the maximum document width ratio is 1.0, and the user is not agreed to click on the screen to enlarge.

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

These two attributes limit the active identification of the phone on iOS and the active identity mailbox on Android.

Get the value of the scroll bar:

window.scrollY  window.scrollX

The values in the desktop browser that you want to get the scroll bar are obtained through document.scrolltop and Document.scrollleft. But in iOS you will find that these two properties are not defined, why? Because there is no concept of scroll bars in iOS, the values in the scroll bar are normally obtained in Android via these two properties. 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

. Be able to block the input frame at the same time weird inner shadows. Fix the button style can not be changed under iOS, test also found a small problem is. With the above attribute added, the default or rounded corner of iOS is only possible with the Border-radius property change.

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  ;     

Then I want an element 100% to show. There must also be a fixed padding-left/padding-right, and a 1px border. What to do? So writing code must result in a horizontal scroll bar, swollen? Believe that the problem is to be solved.

This time the great CSS3 provides us with the box-sizing attribute, the detailed explanation of this property does 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;}

The WebKit supports a property named-webkit-line-clamp. Refer to the link, which means that this attribute is not part of the standard. May be used internally by WebKit. or the deprecated attribute. It is important to note that display needs to be set to Box,-webkit-line-clamp to indicate a few lines.

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:
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.
Support Image-set: Let's say your browser supports Image-sete. and is the ordinary display screen. The browser selects the @1x background image in Image-set;
Image-set under the Retina screen: Suppose your browser supports Image-set. And 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 induction effect detailed can be http://w3c.github.io/deviceorientation/spec-source-orientation.html

Mobile-side Touch events:
Touchstart//triggers when finger touches the screen
Touchmove//trigger when the finger that has touched the screen starts 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, a touchstart is theoretically triggered. Very many times touchmove, and finally Touchend, but on Android 4.0, Touchmove is only triggered once, the trigger time and Touchstart almost the same, and touchend is not triggered directly. This is a very serious bug, many people in Google issue have proposed that this very egg-like bug is in the simulated drop-down refresh is encountered especially when the number of DOM nodes in the Touchmove is becoming more than the same. The solution at that time 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 inference + 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 a text box style is fixed, assuming that the text box has the focus, its position will be messed up, because iOS is self-adaptive centering, the fixed text box will run to the middle of the page.
There are two ways to solve this problem:
Ability to change the fixed to absolute when the text box has the focus and lose focus. But it's not a good experience to have the screen slide up and down.

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

The other is to put a fake fixed text box at the top of the page. A absolute text box is hidden at the top of the page, hidden when the fixed text box gets the focus, and then the absolute text box is displayed, and when the focus is lost, the absolute text box is hidden and 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 the following scroll.

Position:sticky
Position:sticky is a new CSS3 property that behaves like Position:relative and position:fixed, when the target area is visible in the screen. It behaves like a position:relative; 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:
Because this is a whole new property. So far there is no norm, and the consortium has just started to discuss it. Now only the WebKit nightly version number and chrome 23.0.1247.0+ Canary have started to support it.

It is also important to note that. Assuming that the left and right values are defined at the same time, then right will be invalid. Same time, define top and Bottom,top win ~ ~
Mobile Endpoint Penetration Event
Simply put, because on the mobile side we often use the tap (Touchstart) event to replace the Click event. Then there will be a scenario where:

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

A DIV is an absolutely positioned layer of z-index higher than a. 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 disappears normally when we click on the mask, but when we click on the mask on the a tag, we find that a link is triggered. This is called a point-through event.
Reason:
Touchstart earlier than touchend earlier than click.

That is, the click Trigger has a delay, about 300ms in length. That is, when the tap triggers the mask to hide, the click does not trigger. 300ms is hidden because of the mask layer. Our click Triggers to the link on the a below.

The 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. Network requests are very precious resources, especially in 2g or 3g network, so can not send the requested resources to try not to send, for some small picture icon and so on. The ability to encode images in Base64 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 Kaka. So we need to use CSS3 's Transform:translate3d, to replace,
This effect allows the browser to turn on GPU acceleration for smoother rendering. But the pen-to-lab experience is good on iOS, but some of the low-end Android models may have unintended effects.

High-speed rebound scrolling
On iOS, assume that you want an element to have a scrolling effect like Native. You can do this:

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

With a pen test, this effect is inconsistent on different iOS systems,
For the partial scrolling, iOS8 above, do not add this effect, scroll super slow, iOS8 a bit, do not add this effect. Scrolling is smoother
For body scrolling, iOS8 above, without the same effect has an elastic scrolling effect.

In the ongoing update.

。

A summary of mobile web issues