Preface: I met many problems in the process of making H5, so I specially record them. Convenient access to



directory

1. Adaptation on the mobile terminal 2. The soft keyboard on the mobile terminal plays up 3. Mobile screen rotation 5. Conclusion

First, the adaptation of mobile terminal

The problem

Due to different screen sizes and resolutions of mobile phones, the development of mobile web pages needs to maintain the effect of design drawings in different mobile phones.

  1. Viewport Settings in HTML

    2. Mobile has three different viewport concepts:

    1. Layout ViewPort: a layout area in the CSS 2. Visual ViewPort: size of mobile phone screen 3. Ideal Viewport: Size on the drawingCopy the code

    CSS Pixels and Device Pixels


    use
    metaThe tag controls the ratio and size between them.

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

    Here are some properties of the meta tag that you can use to change the viewport;

    attribute Attribute values describe
    width Numerical/device – width Viewport width
    height Numerical/device – height Viewport height
    initial-scale 0.0 ~ 10.0 Scale ratio between the width of the device and the size of the viewport
    maximum-scale 0.0 ~ 10.0 Maximum scale
    user-scalable Boolean value The default is yes. When it is no, the user cannot zoom the page

    Where width=device-width is used to make the current viewport width equal to the width of the device, and the screen zoom ratio is 1.

  2. JavaScript dynamically evaluates REM and sets the font size of the root

    3. Rem is used for adaptive layout of pages. Js listens for page size changes and dynamically sets the font size of the root element

       (function (doc, win) {
    var width = 750; // Width of the design
    var height = 1600; // Design height
    var rootValue = 100; // Calculate on the basis of 100

    // Trigger the event
    var rszEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
    var reCalc = (function () {
        var reCalc = function () {
            var docEl = doc.documentElement;
            var winWidth = docEl.clientWidth;
            var winHeight = docEl.clientHeight;
            if(! winWidth)return;
            var fontSize;
            if (winWidth < winHeight) {
                if ((winWidth / winHeight) > (height / width)) {
                  // Based on height
                    fontSize = (rootValue * (winHeight / height));
                } else {
                  // Based on the widthfontSize = (rootValue * (winWidth / width)); }}else {
                if ((winWidth / winHeight) > (height / width)) {
                    fontSize = (rootValue * (winWidth / height));
                } else{ fontSize = (rootValue * (winHeight / width)); }}// The font size does not exceed 110
            docEl.style.fontSize = (fontSize > 110 ? 110 : fontSize) + 'px';
            return reCalc;
        };
        returnreCalc(); }) (); reCalc();setTimeout(function () {
        reCalc();
    }, 300);
    win.addEventListener('load', reCalc, false);
    win.addEventListener(rszEvt, reCalc, false);
    if(! doc.addEventListener)return;
    doc.addEventListener('DOMContentLoaded', reCalc, false); }) (document.window);
Copy the code

Two, the mobile end of the soft keyboard up

Question:

On Android and IOS, there are differences between the status of the soft keyboard up and down, and different events. On IOS, the input box takes focus, the keyboard is up, and the webview scrolls up as a whole. When the keyboard is down, it does not return to its original position. And the soft keyboard input does not lose focus when the soft keyboard fold is clicked.

    var viewHeight = window.innerHeight;
    $(window).resize(function () {  
          var thisHeight = $(this).innerHeight();  
          if (viewHeight - thisHeight > 50) {  
              // The window has changed (big), so the keyboard pops up
              $().css()
          } else {  
              // The window has changed (small), so the keyboard collapses
              $().css()
          }  
      });
Copy the code

The idea of this method is to determine whether there is a keyboard pop-up by the change of the page height, borrowed from jquery resize function, triggered when the interface size changes.

3. Automatic video playback

Question:

On the mobile end, to avoid wasting traffic. Autoplay is almost banned. The user needs to manually trigger it. The video jumps to a certain point in time, but the frame jump is not accurate.

    // Add a button to the page to force the user to click
    // The video is played after the user interacts with the page
    btn.ontouchstart = function () {
        video.play();
    }
Copy the code

The video jump position is not correct, because the video jump on mobile phone will automatically jump to the latest video key frame. If the video jump key frame is at 3.5s, when you set Videota. currentTime=2.5, the video will jump to the position of 3.5s. The solution is to set the frame interval properly or insert the same frame to extend the time point.

Fourth, mobile terminal screen rotation

Question:

When the page is displayed in landscape, the user opens portrait, and does not open landscape mode in the phone, but also force the user to open. This detracts from the experience; [Fixed] Canvas position will be confused after landscape rotation

1. CSS media query to control styles

   /* The style used for portrait */ 
@media all and (orientation:portrait) { 
    .css{}}/* The style used for landscape */ 
@media all and (orientation:landscape) { 
    .css{} 

Copy the code

2. Use JS to listen to page events to modify the state after vertical and horizontal screens

// Listen for page events
var evt = "onorientationchange" in window ? "orientationchange" : "resize";
    window.addEventListener(evt, function() {
      // If the time is triggered, the height and width will get wrong data immediately, so add a setTimeout
        setTimeout(() = > {
          var width = document.documentElement.clientWidth;
          var height =  document.documentElement.clientHeight;
            $wrap =  $('#wrap');
            / / landscape
          if( width > height ){
              $wrap.width(width);
              $wrap.height(height);
              $wrap.css('top'.0 );
              $wrap.css('left'.0 );
              $wrap.css('transform' , 'none');
              $wrap.css('transform-origin' , '50% 50%');
          }
          / / vertical screen
          else{
              $wrap.width(height);
              $wrap.height(width);
              $wrap.css('top',  (height-width)/2 );
              $wrap.css('left'.0-(height-width)/2 );
              $wrap.css('transform' , 'rotate(90deg)');
              $wrap.css('transform-origin' , '50% 50%'); }},1000);
    }, false);
Copy the code

I’m going to change the outermost layer so when the box is rotating the screen, I’m going to set rotate plus (minus) 90 degrees; And if the user cuts to landscape, you need to restore the rotate.

Call it a day.





Five, the conclusion

Here are some of the pits that have been documented on mobile, and there is still a lot of knowledge left to learn about mobile. For these pits, but also stepped on a more profound impression. Make yourself either on the way to the pit or in the pit.

Related links

  1. Mobile terminal adaptation scheme
  2. How to make the mobile page forced landscape


To learn more

H5’s stomping diary as a teenager

Wechat search public number: DigitMagic magic laboratory