Summary of mobile Web development issues and optimizations

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

<meta content="telephone=no" name="format-detection" />Copy the code

<meta content="email=no" name="format-detection" />Copy the code

<meta name="apple-mobile-web-app-capable" content="yes"/ > <! <meta name= > <meta name="apple-mobile-web-app-status-bar-style" content="black"/ > <! -- Default, black, black-always, but I always use black-->Copy the code

3. Call or text

<a href="tel:020-11811922"</a> <a href="sms:10086"</a>Copy the code

4. Css3 transition animation to enable hardware acceleration

Ps: It is said on the Internet that if you use this, the power consumption of your phone will increase. I also have a rough try on the mobile phone, there is indeed that one thing, usually read the blog, about 5 minutes less 1%, with hardware acceleration for about 3 minutes less 1%, everyone pay attention to reasonable use.

.translate3d{
       -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
       -ms-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0);
 }Copy the code

With that said, two tips for animations or transitions:

1. On mobile (and actually on PC as well). CSS3 animations or transitions should be animated using transform and opacity instead of left and top.

2. If animations and transitions can be handled in CSS3, do not use JS. If it is complex animation can use CSS3 + JS (or HTML5 + CSS3 + JS) with development, the effect is only unexpected, nothing can be done.

5. The mobile click screen produces a 200-300 ms delayed response

Because the click event has to wait for confirmation of whether it is a double click event, there will be a delay of 300ms (if the interval between two click events is less than 300ms, it is considered as a double click event), and the experience is not good. Now, the first solution is to use touchStart or touchend instead of click. Or encapsulate a tap event instead of a click event. The so-called TAP event consists of a touchStart event + TouchMove event + TouchEnd event encapsulation.


As for the delay explanation of the Touch and mouse events, I quote an image from The blog of Ye Xiaochai, as follows








On the phone, the delay for Click is nearly 400ms. This is a serious delay for the user! So on mobile, click is not recommended.


Attached is the original text of great God Ye Xiaochai
Handheld device click response speed, mouse events and Touch events those things

6. Image optimization

6-1. Base64 encoded image replaces URL image

There should be no explanation for this, just don’t send the request if you can. For some small ICONS (I converted the ICONS below 8K into base64), you can use base64 to reduce the number of requests sent. Especially in the mobile terminal, the request appears particularly precious, in the case of bad network speed, the request is precious in the precious.

6-2. Image compression

For the whole website, the image is one of the most traffic resources, can not be used, but the use of icon base64 encoding, font icon instead, SVG and so on to replace, use should choose the most appropriate format, appropriate size, and then compression – recommended by Tencent here
Wisdom figure.


PS: excessive compression image size influence image display effect, may make the picture become blurred, generally speaking, the quality is about 60!

6-3. Lazy image loading

The loading speed of the first screen directly affects the user experience. Therefore, you are advised to load the images that are not on the first screen only when the user needs them. This will greatly optimize the first screen loading and reduce the time required for the first screen loading!


Ps: Lazy loading requires frequent manipulation of the DOM using JS, which will result in a lot of redrawing and rendering, affecting performance.

6-4. Img or background

There are two ways to show the picture, one is to show the picture label, one is to show the background picture! Here is the difference between the two.


Img:
htmlIn the label
imgIt’s part of the structure of the web page that loads along with other tags during the loading of the structure.


Background:In order to
cssThe background will not start loading until the structure has been loaded (after all the contents of the page have been displayed)


That is, the page loads the tag first
imgAnd then load the background image
backgroundThe quoted picture. I bring in an image, and before that image loads,
imgThe following content will not be displayed. with
backgroundTo introduce the same image, page structure and content after loading is complete, then start to load the background image, web content can be viewed normally, but can not see the background image. As for these two kinds, we choose the weight factors such as habit and demand!

7. Quick rebound roll

On ios, if you have local scrolling, you add this property! If you don’t add it, the roll will be slow and it will look like a card.

-webkit-overflow-scrolling: touch;Copy the code

However, with this added, it creates bugs on ios.




The following layout

Fb-box is a large div that contains all the elements on the page, including the popover you see. -webkit-overflow-scrolling:touch; position:relative;

Positioning requires,
-webkit-overflow-scrolling:touch;It does, but it’s set in this way
iosThere will be a
bugAfter scrolling a certain distance, click on the display popover, and then close it, you will find that part of the popover “remains on the page.”








Solution 1:


The popup window
divand
.fb-boxLay it out as a sibling node and put another one on the outer layer
divWrap, this pit even if climb up, the effect is as follows












Solution 2:


.fb-boxTo get rid of
position:ralative;. Let the popup window
divreference
bodyPositioning!

8. Use “fixed” carefully

Under the ios
fixedElements are prone to positioning errors and soft keyboard pop-ups when affected
fixedElement positioning, elements will be misaligned (scroll to restore), sometimes a splash screen effect. I have also googled this question and found that other people have encountered problems that I have not! That’s, uh. So on the phone, it’s not recommended
fixedPosition, use
absoluteInstead of! If you must use it, test it a few times after you’ve written it!

9. Eliminate the Transition splash screen

PS: This problem, I recently developed, it seems not to add this code has no impact, but before is required to add, add, and now did not add, there is no feedback what problem!

.no-flash { 
        -webkit-transform-style: preserve-3d; 
        -webkit-backface-visibility: hidden; 
        -webkit-perspective: 1000; 
} Copy the code

10. Removing the translucent gray mask that is created when an element is touched in ios

A, button, input, textarea {- its - tap - highlight - color: rgba (0,0,0,0;) }Copy the code

11. Remove the default input style in ios

input,button,textarea{-webkit-appearance: none; }Copy the code

12. Swipe left and right to avoid following the page

This detail came to me when I was developing the focus map based on VUE. Later, I could not find the method, so I directly asked the question on SF. You can refer to it below:
Scrolling diagram of mobile terminal, when sliding up and down does not trigger the page scrolling


Ps: I’m not using any library, I’m judging by the distance of touchstart and Touchend to swipe left or up and down!

13. Vue-router sharing problem with wechat

The shared connection sent is as follows


http://www.example.com/dist/html#/index?utm_source=share


http://www.example.com/dist/html#/index.html/index?utm_source=share


But the actual link after sharing is like this, others click on the shared link, will not open the page


http://www.example.com/dist/html?from=xxxx#/index&utm_source=share


http://www.example.com/dist/html#/index.html?from=xxxx/index&utm_source=share




The solution


1. Customize the URL for sharing


2. Avoid single-file applications

14. Crisp bangs on the iphoneX

Apple’s new mobile phone has been making jokes for a while, but today we’re going to talk about that! Let’s talk about the troubles the iphoneX brings to the front end, but also to the UI. The introduction of desert, zhang xinxu et al on the iphoneX qi bangs a solution! Avoid jumping into the pit!


IPhone X notch and CSS


Elements scroll automatically around the iPhone X’s bangs with CSS Shapes


Analyze iOS 11 web page adaptation

IPhoneX adaptation summary

15. Other references

The above are all specific problems encountered, as for some more general details of optimization, or development problems encountered, such as: compression code, pictures, merged files, etc. You can refer to the resources below, these I do not expand to say!




1.
What are the optimized solutions for the Web mobile front end?


2.
Optimize the mobile Web page performance


3.
Web front-end optimization best practices and tools collection


4.
Mobile Front End series – Mobile page performance optimization


5.
Web performance optimization: Image optimization

16. Summary

I am on the mobile web(mobile phone website), the problem that encounters, temporarily is above these! I’m sure there will still be a lot of problems I haven’t encountered, which will be recorded later, but not necessarily published in the way of articles. If you are in the development of mobile website, have encountered any big or small problems, in the comments or their own way to remind the article! Convenient for the future to avoid stepping on pits! Finally, if you have anything to add or feel that I did not write well, write wrong! Welcome advice!