This article refers to the original- http://bjbsair.com/2020-03-22/tech-info/2149/

Written in front

In the era of mobile development, the front-end students just bid farewell to the bald Internet Explorer, but found that the mobile Internet era that they had been looking forward to for a long time was not as beautiful as they imagined. It's hard to be happy with all kinds of system compatibility problems and browser compatibility problems. As a front-end programmer working for less than 3 years, I always believe that good memory is better than bad writing. Every time I step into a pit in the process of project development, I record it habitually. I was a little surprised to see that there were so many at a glance yesterday. So share it and hope it can help you.

Style problem

1. The parent element has border radius set, the child element has transform applied, and the parent element has overflow:hidden set, but it fails?

//Set for parent element   
{  
    position:relative;  
    z-index:1;  
}  
Copy code

2. Set the color of the placeholder of the input text box

input::-webkit-input-placeholder{  
    color:rgba(144,147,153,1);  
}  
Copy code

3. How to set the body background color, height:100%, not effective?

Set the height of html and body at the same time  

html,body{  
    height:100%；  
}   
or  
body{  
  height: 100vh; / / represents 100% of the screen  
}  
Copy code

4. One pixel border problem

.row {  
  position: relative;  
  &:after{  
    content: "";  
    position: absolute;  
    left: 0;  
    top: 0;  
    width: 200%;  
    border-bottom:1px solid #e6e6e6;  
    color: red;  
    height: 200%;  
    -webkit-transform-origin: left top;  
    transform-origin: left top;  
    -webkit-transform: scale(0.5);  
    transform: scale(0.5);  
    pointer-events: none; /* Prevent Click to trigger */  
    box-sizing: border-box;  
  }  
}  
//Copy code

5. css attribute touch action: none;

This attribute will cause the Android page to fail to scroll. Use with caution!  
Copy code

6. Remove the inner shadow of input input input box of ios mobile phone

input{   
    -webkit-appearance: none;   
}  
Copy code

7. There is a layer of div in the Android mobile terminal. The text display is not in the middle.

It is better to set padding, unfixed height and line height for div;  
Copy code

8. The cursor of input input box on iOS is misplaced

It's caused by fixed positioning. It's solved by changing to absolute.

.box{  
    position: absolute;   
}  
Copy code

9. div realizes the simultaneous existence of background color and background image

{  
    background-color: #fff;  
    background-image:url('../../assets/img/model-bg.png');  
    background-repeat: no-repeat;  
}  
//Copy code

10. css making ellipse

{  
    width: 150px;  
    height: 100px;  
    Border radius: 50% / 50%; / / shorthand attribute: border radius: 50%  
    background: brown;  
}  
Copy code

11. Picture center

object-fit: cover;  
Copy code

Compatibility problem

1. When iconfont fonts are introduced into the application due to the problem that iconfont fonts can't be loaded (or disorderly code), they need to be introduced in order. The correct sequence is as follows:

@font-face {  
    font-family: "djicon";  
    src: url('./iconfont.eot'); /* IE9*/  
    src: url('./iconfont.svg#iconfont') format('svg'), /* iOS 4.1- */  
    url('./iconfont.woff') format('woff'), /* chrome,firefox */  
    url('./iconfont.ttf') format('truetype'); /* chrome,firefox,opera,Safari, Android, iOS 4.2+*/  
}  
// Reference document: https://www.cnblogs.com/Megasu/p/4305116.html  
//Copy code

2. The background is that the back-end return is html fragment

node - cheerio module, easy to operate dom string, practical case: solve the problem of PC image display in mobile reference document: www.jianshu.com/p/e6d73d8fa www.npmjs.com/package/che…

width: number = 784 representative pc End width   
regHtml(str: string){  
    // Parameters are html fragments   
    let _this = this;   
    const $ = cheerio.load(str);  
    $('img').each(function(index,element){  
        let attr = element.attribs //Attribute of element   
        // Screen width   
        let docEl = document.documentElement   
        let clientWidth = docEl.clientWidth  
        if(attr.width){ //If width is set  
            // Picture width / screen width ratio   
            let rate = attr.width /_this.width   
            //Width to height ratio of picture   
            let wh = attr.width/attr.height   
            $(element).attr('height', _this.rate*clientWidth/wh)  
            $(element).attr('width', _this.rate*clientWidth)  
            $(element).attr('style', '')   
            $(element).attr('class', 'img-skew')   
        }   

    })   
    return $.html()   

}  
//Copy code

3. IOS clicking input does not focus on the problem.

In ios system, click Input input Input box, no response, unable to gather cursor, unable to adjust keyboard.

Solution: add the click event to the mandatory, and then gather the cursor to the input box.

cilckTextarea(){  
    document.getElementsByClassName('cont-inp')[0].focus();  
},  
Copy code

4. Upload a picture, iPhone 7 iPhone 7p when uploading a picture, the name of the picture can't be transferred

Solution: add picture name manually

let data = new FormData();  
data.append("fileName", file[0],file[0].name);   
//Copy code

5. When ios wechat opens the webpage, the page slides up after the keyboard pops up, resulting in the misplacement of the button response area in the pop-up box

Solution: manually roll the scroll bar to the bottom to write a custom instruction.

import Vue from 'vue';  
Vue.directive('blur', {  
    'bind'(el) {  
        el.addEventListener("click", function(){  
            window.scrollTo(0,0);  
        })  
    }  
});   
//When you click the submit button, just scroll to the bottom  
//Copy code

6. After the wechat browser adjusts the font, the page is misplaced.

Solution: prevent page font from automatically resizing

// Android:  
(function() {  
  if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {  
    handleFontSize();  
  } else {  
    if (document.addEventListener) {  
      document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);  
    } else if (document.attachEvent) {  
      //IE browser, non W3C specification  
      document.attachEvent("onWeixinJSBridgeReady", handleFontSize);  
    }  
  }  
  function handleFontSize() {  
    // Set page font to default size  
    WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });  
    // Overriding events for setting the font size of web pages  
    WeixinJSBridge.on('menu:setfont', function() {  
      WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });  
    });  
  }  
})();  

//iOS:   
// ios uses WebKit text size adjust to disable font size adjustment  
body{-webkit-text-size-adjust: 100%!important;}  
//Copy code

7. On the compatibility of mobile style

• Set the view port attribute of the meta tag to ignore the real resolution of the device. Directly through dpi, reset the resolution between the physical size and the browser, so as to achieve a unified resolution effect. And disable user scaling

<meta  />  
Copy code

• Use rem for screen adaptation, set the font size of root element, and then change all layout related to pixels into rem units in development.

8. Cancel the default capitalization of English initial when input ting in iOS

<input type="text" autocapitalize="none">  
Copy code

9. Prevent iOS from identifying long numbers as phones

<meta  />  
Copy code

10. Disable ios and android users from selecting text

-webkit-user-select: none;  
Copy code

11. In some cases, for non clickable elements such as (label,span), listening to the click event will not be triggered under ios

Just add a line of css code to the element that does not trigger the click event:

cursor: pointer;  
Copy code

Debugging tools

1. Weinre remote debugging tool

Simple steps:

-Local global installation, command line: npm install -g weinre  
-Start a detector locally: weinre --boundHost 1.2.3.4 (IP is the local IP address)  
-Visit this address in the browser: http://1.2.3.4:8080  
-Put the following list of things on the page you need to debug:  
<script src="http://1.2.3.4:8080/target/target-script-min.js#anonymous"></script>  
-Click the link to open: http://1.2.3.4:8080 / client / ා anonymous  
Copy code

2. vconsole log printing

import VConsole from 'vconsole'  
var vConsole = new VConsole();  
//Copy code

3. fiddler packet capturing also needs to support https

Solution: fiddler needs to install trust certificate, mobile phone also needs to install trust certificate, open it in browser

http://1.2.3.4:8888 / / local IP address + port number  
Copy code

4. charles needs to install a certificate to grab the package

Mobile browser input: chls.pro/ssl, to download the certificate.  
Mobile - Settings - Security and privacy - more secure downloads - install certificate from sd card - find the certificate previously downloaded in browser  
Copy code

vue related issues

1. How does vue get the height of the image after pulling back the data?

<img  
    :src="userInfo.profilePicture"  
    alt  
    class="img-picture"  
    v-if="userInfo.profilePicture"  
    ref="myImg"  
    @load="imageFn"  
>  
 imageFn() {  
    console.log(this.$refs.myImg.offsetHeight);  
    console.log(this.$refs.myImg.offsetWidth);  
 },  
//Copy code

2. For the same dom node in vue, v-if and v-for are not recommended to be used at the same time. Official answer:

3. The problem that v-show does not take effect after the item property value is changed in vue v-for

Add this.$forceUpdate(); for forced rendering, and the effect is achieved.  
Because there are too many data levels, the render function does not update automatically, so it needs to refresh manually.  
Copy code

4. This exit guard is usually used to prevent users from leaving before saving changes. This navigation can be cancelled by next(false)

beforeRouteLeave(to, from, next) {  
    if (to.path === '/votes/subject') {  
        next('/task-list');  
    } else {  
        next();  
    }  
}  
//Copy code

5. Solution to user defined parameter transfer of element UI

The default binding parameter of handleSelect here is the selected data. If a page has several identical components, which one do you want to choose?

<el-autocomplete  
    v-model="state4"  
    :fetch-suggestions="querySearchAsync"  
    placeholder="Please enter content"  
    @select="handleSelect"  
></el-autocomplete>  
//Copy code

Solution:

<el-autocomplete  
    v-model="state4"  
    :fetch-suggestions="querySearchAsync"  
    placeholder="Please enter content"  
    @select="((item)=>{handleSelect(item, index)})"  
    // Just write a closure. index represents the first component  
></el-autocomplete>  
//Copy code

6. Element UI framework El input cannot trigger @ key.enter event

<el-input v-model="form.loginName"   
placeholder="Account number"   
@keyup.enter="doLogin">  
</el-input>  
//Copy code

Solution: use @ key.center.native

<el-input v-model="form.loginName"  
placeholder="Account number"   
@keyup.enter.native="doLogin">  
</el-input>  
//Copy code

Last

The above is all the things that the front-end little sister summed up in the small book of the past two years. Of course, we believe that our front-end Taoists have seen big waves. Welcome to exchange in the comment area and share your valuable experience! o(￣︶￣)o