Front-end involved in the field is not only PC browser, now is the era of mobile king, so most of the time or in the mobile end of the page adaptation. So here’s a list of some of the problems I’ve encountered in mobile development.

1. Hide the address bar of the mobile browser at the bottom of the menu bar

When setting the width and height of the mobile page to 100% and setting flex:1 for the inside element, problems with the browser address bar and the toolbar below will result in incomplete page display on some phones. Since we can’t calculate the height of each browser’s address bar and toolbar, we can just hide it. The hidden code below.

  <! -- webApp full screen display on IOS devices -->
  <meta name='apple-mobile-web-app-capable' content='yes' />
  <! -- Universal browser -->
  <meta name='full-screen' content='true' />
  <! -- Unique META for QQ browser (X5 kernel) -->
  <meta name='x5-fullscreen' content='true' />
  <! -- 360 browser only -->
  <meta name='360-fullscreen' content='true' />
Copy the code

2. Mobile web page adaptation

Adaptation is an old topic when developing web pages. The current adaptation basically uses the REM layout. The size of the tag (HTML tag) is set according to the screen size of the phone.

<script>
  (function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if(! clientWidth)return;
            if(clientWidth>=640){
                docEl.style.fontSize = '100px';
            }else{
                docEl.style.fontSize = 100 * (clientWidth / 640) + 'px'; }};if(! doc.addEventListener)return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false); }) (document.window);
</script>
Copy the code

The above code automatically modifies the HTML with the font size of the tag, and then uses REM to set the width and height of the element. However, REM cannot set font adaptation.

For me, it’s 9102 now, vw, VH, Vmin,vmax. Check out the compatibility check on Can I Use.

In fact, you can see it is quite good, Android 4.4 and above are compatible. So in the 9102’s, you can rest assured that bold use, even huawei mobile phone browser is not faulty. For the problem with Huawei browser, check out my other article on how to use Replay 16 above to display problems on Huawei phones

For details on REM and VW, VH, Vmin and vmax, see the principle analysis of REM layout. Originally want to put the desert article, today to see suddenly have to pay to see.

3. There will be a blue background color when clicking the A label on the mobile terminal

Solution:

add

a { -webkit-tap-highlight-color:transparent; }
Copy the code