Mobile compatibility compatibility miscellaneous notes

Compatibility and adaptation problems are often faced by front-end development, the following comes from personal development views, if there are wrong places, very welcome to correct, now directly into the topic.

1. IPhoneX adaptation

IPhoneX adaptation should be familiar to students who have touched mobile terminal development. The bangs on the head (44) + the gesture area at the bottom (34) is the area we need to adapt. There are a variety of adaptation schemes, I prefer JS, so here only introduces JS adaptation. The advantage of JS scheme is flexible, when it is determined that the model needs to be adapted, then you can adjust how you want.

Before adaptation, take a look at the models that need to be adapted. Currently, the main models that need to be adapted are as follows. The current iPhoneX is a classic 375×812, which must be adapted, so the following figure does not appear

{
    const UA = window.navigator.userAgent
    return (UA.indexOf("iPhone OS") > -1 && (
        375 === screen.width && 812 === screen.height 
        || 414 === screen.width && 896 === screen.height 
        || 390 === screen.width && 844 === screen.height 
        || 428 === screen.width && 926 === screen.height
        ))
}
Copy the code

2. Ios phone number intelligent identification blue display

Ios smart phone number recognition, while useful, is sometimes not desirable. At the first time in the development, I encountered a troubling phenomenon, that is, sometimes the phone number could be intelligently identified and displayed in blue, and sometimes it was displayed in the color I set myself. The specific reason will be mentioned below, but AT that time I really doubted my life.

Add content=”telephone=no” to the meta tag

<meta name="format-detection" content="telephone=no" />
Copy the code
  • Even with these Settings, some iPhone models may still recognize phone numbers and display them in blue
  • The network is in good condition, the phone number will be recognized and displayed in blue; If the network condition is not good, it cannot be identified and displayed with the set color

The final solution

<a href="tel:4008400006"> Customer service phone:4008400006</a>

a[href^="tel"] {
    color: inherit; // Set your own color
    text-decoration: none;
}
Copy the code

3. Gap problem between pictures

Font-size: 0;

4. Font weight does not take effect

Font weight: 600 On some models, font bold is not a problem. The reason is that some Android models that are 700 start to think bold, and use font weight: bold instead.

5. The TRAGEDY caused by the I label

Ios wechat environment using I tag will appear style bug, even if CSS remove the attribute of I tag, there will be a font tilt, gap between blocks, here can only say that using other tags instead, there may be a better solution.

6. Font size less than 12px center the text vertically

Most browsers have a minimum font size of 12px (the limit may vary). Anything below 12px will be displayed at 12px. Of course, we can scale when we use a font less than 12px. As shown in the figure above, the vertical center of the label text will appear in some browsers when the font size is less than 12px. Even if the flex layout and the padding scheme can not achieve the center effect, then scaling is also a solution, and position is also a solution. However, if our design is really nice and we can change the font size that would be great, but in my opinion there’s no need to bother too much with this little TAB.