This is the sixth day of my participation in the August More text Challenge. For details, see:August is more challenging

preface

Then the front step pit note (a) problem serial number to continue to share

Issue 6: Some mobile phones do not support the Poster cover image attribute of the video label, especially Android

The solution:

  • Use the image element img instead of Poster
  • Img, hide video
  • Video is displayed and img is hidden

Problem 7: When the upper and lower margins of two vertically adjacent block-level elements meet, the upper margin will overlap, and the overlapping margin is equal to the larger one (usually, the top of the inner element will overlap with the outer element to affect the style layout).

The solution:

  • The outer element PADDING is replaced
  • Border :1px solid transparent;
  • Inner element absolute positioning
  • Outer element overflow:hidden;
  • Inner element float:left; Or display: inline – block;
  • Inner element PADDING :1px;

Problem 8: VUE project style cannot be modified after scoped (cannot modify component libraries such as iView UI and Element UI styles)

The solution:

  • To use the depth-action selector, you can use the new vue-loader (installed first, in use) to write:
<style scoped>
.a >>> .b { / *... * / }
</style>
Copy the code
  • Some preprocessors, such as less, may not >>> parse correctly. In these cases, you can use the /deep/ combinator – it’s alias, >>> and exactly the same.
<style scoped lang="less">. Form {background-color: # FFF;/deep/. List {the font - size: 18 px; } } </style>Copy the code

For sass, use /deep/ instead of >>>.

Problem 9: Wechat H5 user set the font size to enlarge or shrink, resulting in a page layout error

On iOS, set the body element to webkit-text-size adjust: 100%! important; Can override the wechat style.

body {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
}
Copy the code

On Android, you need to use WeixinJSBridge objects to set the font size of the web page to the default size, and override the method of setting the font size so that the user cannot set the font size under the web page.

(function() {
    if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
        handleFontSize();
    } else {
        if (document.addEventListener) {
            document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
        } else if (document.attachEvent) {
            document.attachEvent("WeixinJSBridgeReady", handleFontSize);
            document.attachEvent("onWeixinJSBridgeReady", handleFontSize); }}function handleFontSize() {
        WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
        WeixinJSBridge.on('menu:setfont'.function() {
            WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
        });
    }
})();
Copy the code

Problem 10: Ios mobile phone swipes up and down the page will produce a lag, the finger leaves the page, the page immediately stops moving. The overall performance is not smooth sliding, no sliding inertia.

In iOS 5.0 and later, swipes are defined to have two values: auto and touch, with the default value being Auto. The solution

  1. Add the scroll touch method to the scroll container
.wrapper {
  -webkit-overflow-scrolling: touch;
}
Copy the code
  1. Set overflow Set external overflow to hidden and content element overflow to auto. If an internal element exceeds the body, it will be rolled, and the exceeded part of the body will be hidden.
body {
  overflow-y: hidden;
}
.wrapper {
  overflow-y: auto;
}
Copy the code