1. Introduction

So far, in the Internet industry, mobile phones are becoming more and more intelligent, and the proportion of mobile terminals is increasing, especially in the fields of e-commerce, news, advertising and games. User requirements are higher and higher, website functions are better and better, the effect is more and more cool, which requires our product quality is higher and higher, web front-end development is a challenge, is a problem, but also an opportunity. How to make our mobile pages have a better interactive experience, is the theme of this article: mobile Web development issues and optimization summary

2. Meta tags

When the page is displayed on the phone, adding this meta will force the page to keep the width of the document 1:1 to the width of the device, with a maximum width ratio of 1.0, and not allow users to zoom through the screen by clicking or zooming. (this is no longer available in ios10 or later, even if the following meta is added, users can double click to zoom in and out of the page.)

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

Disable automatic phone id on ios

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

Disable automatic mailbox recognition on Android

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

The following two are for the address bar and top style bar in Safari on ios

<meta name="apple-mobile-web-app-capable" content="yes"/ > <! <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <! 3. Always use black--> always.Copy the code

3. Call or text

<a href="tel:020-11811922"> Call :0755-10086Copy the code

4. Css3 transition animation enables hardware acceleration

Ps: It is said on the Internet that if this is used, the battery consumption of the phone will also increase. I have also tried on the mobile phone, there is such a thing, usually read blog, 5 minutes or so less 1%, with the hardware acceleration of 3 minutes or so less 1%, we 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

Two tips for animations and transitions by the way: 1. On mobile (actually the same on PC). Use transform and opacity instead of left and top for CSS3 animations or transitions. 2. Animations and transitions can be handled with CSS3, do not use JS. If it is complex animation can use CSS3 + JS (or HTML5 + CSS3 + JS) with the development, the effect is only unexpected, there is no can not do.

5. The click screen on the mobile end generates 200-300 ms delayed response

Click events have a 300ms delay due to waiting to confirm whether they are double clicks (if the interval between two clicks is less than 300ms, it is considered double clicks), which is not a good experience. The first of the current solutions is to use TouchStart or Touchend instead of Click. Or encapsulate a TAP event instead of a click event, which consists of a TouchStart event + touchMove + TouchEnd event.

6. Image optimization

6-1. Replace URL images with base64 encoded images

This should not be easy to explain, that is, can not send requests do not send, for some small ICONS (I do this is to convert below 8K ICONS to Base64) and so on, you can use base64 images, to reduce the request to send. Especially in the mobile end, the request is particularly precious, in the case of poor network speed, the request is the precious of precious.

6-2. Image compression

For the whole website, the picture is one of the most traffic resources, can not use it is not applicable, icon but use Base64 encoding, font icon instead, SVG to replace, use to choose the most appropriate format, the appropriate size, and then compressed — here recommended Tencent launched the map. PS: Excessive compression of the image size affects the image display effect, may make the image blurred, generally speaking, the quality of about 60 is about the same!

6-3. Lazy loading of images

The loading speed of the first screen directly affects the user experience. You are advised to load non-first screen images only when the user needs them. This can greatly optimize the first screen load, reduce the first screen load time required! Ps: Lazy loading requires frequent manipulation of the DOM with JS, which can lead to a lot of redraw rendering, affecting performance.

6-4. Img or background

There are two ways to display the picture, one is to display the picture label, one is to display the background picture! Here’s the difference between the two. Img: Tag in HTML the IMG is part of the structure of the page and is loaded along with other tags during the loading process. Background: An image that exists as a CSS background image will not load until the structure has been loaded (the content of the page has been fully displayed). That is, the page will load the img tag first and then the image referenced by the background image. When an image is introduced, the img content will not be displayed until the image is loaded. While using background to introduce the same image, after the structure and content of the web page are loaded, the background image starts to be loaded. The content of the web page can be viewed normally, but the background image cannot be seen. As for these two kinds, we choose according to habit, demand and other weight factors!

7. Fast rebound roll

On ios, if there is partial scrolling, this property will be added! If not, scrolling will be slow and it will look like a pinch.

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

However, adding this can cause bugs on ios. (carefully)

8. Be careful with fixed

Fixed elements are prone to positioning errors in ios. When the soft keyboard pops up, the positioning of fixed elements will be affected and element dislocation will occur (scrolling and recovering), and sometimes the effect of flash screen will appear. So on mobile phones, it is not recommended to use fixed positioning, use absolute instead! If you must use it, test it several times after you’ve written it!

9. Eliminate the Transition screen

10. Removed the semi-transparent gray mask created when elements are touched in ios

a.button.input.textarea{-webkit-tap-highlight-color: rgba,0,0,0 (0) }Copy the code

11. Remove the default input style from ios

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

12. Slide left and right to avoid page sliding (not yet solved)

Swipe left and right or up and down depending on how far touchStart and TouchEnd move!