Recently, I just took over a new live mobile phone H5 page (browser and wechat open). Due to the tight time and urgent task, I quickly read some information on the Internet. First, I briefly sorted out the implementation process, the pits encountered in the process, and how to fill the pits later. After all, this is a small white, there may be some error, the opportunity will continue to deep learning.

I. Implementation process

1. Set the Meta tag

<meta name="viewport"   content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Copy the code

Assign values to meta tags using JS

var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content'.'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
Copy the code

2. Determine the size of the visual draft on the mobile phone

Design width /100. For example, if I received a visual size of 375px by 665px, this would be 3.75

3. Use javascript to dynamically assign the HTML font size value, and listen for resize. Call the HTML font size method again

Document. The documentElement. Style. FontSize = document. DocumentElement. ClientWidth / 3.75 +'px';
Copy the code

4. In the SCSS file, define a method to convert PX to REM

@function torem($px{/ /$pxIs the font at sign to be convertedreturn $px/ 100px * 1rem; //100px is the root font size}Copy the code

5. Use the ToREM method to set the attribute values of the elements according to the width and height marked in the design draft

Such as:

width:torem(24px);
height:torem(24px);
Copy the code

6. It is not recommended to use ToREM to process the text size in the page. You can use CSS3 media query to set the text size of the element

Two. The pit

This H5 page is used for promotion and registration of users, so it is simply a few screen introduction pages, with an IFrame registration page embedded in the middle and the final registration success page. So I made it into a long screen, and slid the screen to the corresponding NTH screen by judging the user to slide up and down, and set transform: Translate () or margin-top value on the outer container of several screens, because I seem to see that the Built-in browser of wechat is not necessarily compatible with CSS3. So I ended up with margin-top (depending on your page layout).

1. There is a conflict between sliding in the built-in browsing of wechat and the default action of wechat (for Android,ios does not).Solution:Added to the CSS of the element that listens for the onTouchMove and onTouchEnd events
touch-action: none;
Copy the code

To tell the truth now CSS is really more and more powerful, happy ~ you said later I will focus on CSS has a future ？？？？？

2. Iframe could not respond to the touch of fingers. Later, touch listening was added on the registration page, and postMessage of HTML5 was used to solve the cross-domain problem. Across the window messaging is upward or downward sliding https://www.cnblogs.com/dolphinX/p/3464056.html
3. The layout of the form is incorrect when the soft keyboard appears

www.cnblogs.com/hellolm/p/4… Temporarily think of so much, pure white road, there may be deviations, but also hope not to spray, (^__^) hee hee…… .