Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities.

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

1px fit scheme

Sometimes, designers want 1px to look like 1px on the phone, which is also…. No, but we have to give them what they want,

This is where we can use scaling to do that

.border_1px:before{
    content: ' ';
    position: absolute;
    top: 0;
    height: 1px;
    width: 100%;
    background-color: # 000;
    transform-origin: 0% 0%;
}
@media only screen and (-webkit-min-device-pixel-ratio:2) {.border_1px:before{
        transform: scaleY(0.5); }}@media only screen and (-webkit-min-device-pixel-ratio:3) {.border_1px:before{
        transform: scaleY(0.33); }}Copy the code

Set a special class to handle the 1px problem and add to it using dummy classes

  • -webkit-min-device-pixel-ratioGet pixel ratio
  • The transform: scaleY (0.5)It’s scaled vertically, and the numbers behind it are multiples

Image blur problem

.avatar{
    background-image: url(conardLi_1x.png);
}
@media only screen and (-webkit-min-device-pixel-ratio:2) {.avatar{
        background-image: url(conardLi_2x.png); }}@media only screen and (-webkit-min-device-pixel-ratio:3) {.avatar{
        background-image: url(conardLi_3x.png); }}Copy the code

According to the different pixel ratio, prepare different images. Normally, 1px image pixel corresponds to 1px physical pixel, and the image display will not be blurred, but this is rare, not very important. For special needs, we do not do this.

Rolling penetration problem

Mobile site, we often have some pop-up box, such a pop-up box, sliding on the above, will lead to the whole page behind us to move, how to solve this problem?

body{
    position:fixed;
    width:100%;
}
Copy the code

Add position:fixed to the body to make the scroll bar invalid, here we use JS to control the display and hide of the pop-up box, and add position:fixed moment, you can see the page returned to 0,0, because fixed is positioned according to the visible area.

The keyboard to evoke

main{
    padding: 2rem 0;
    /* height: 2000px; */
    position: absolute;
    top: 60px;
    bottom: 60px;
    overflow-y: scroll;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}
Copy the code

When fixed positioning is performed at the bottom according to the page, the keyboard pops up for a moment, and Fixed will become invalid and become similar to Absoult, so that the content of main does not scroll, and fixed will not move together

And to ensure silky smoothness:

  • -webkit-overflow-scrolling: touch;

The magic of mobile

Some Settings for IOS and some Settings for Android

Title added to the home screen

<meta name="apple-mobile-web-app-title" content="Title"> 
Copy the code

Add the APP icon to the home screen

<link href="short_cut_114x114.png" rel="apple-touch-icon-precomposed">
Copy the code
  • Usually we only need to provide one114 * 114The icon of the

To enable thewebAppFull screen mode

<meta name="apple-mobile-web-app-capable" content="yes" /> 
<meta name="apple-touch-fullscreen" content="yes" /> 
Copy the code

  • apple-mobile-web-app-capable

    Remove the default Apple toolbar and menu bar, default to No

  • apple-touch-fullscreen

    Full screen

Mobile phone number identification

<meta name="format-detection" content="telephone=no" />
Copy the code
  • safariSome numbers that might be cell phone numbers are identified, and we can use the above method to disable identification

Manually enable the call making function

<a href="tel:13300000000">13300000000</a>
Copy the code
  • Click the link on your phone to make a call directly

Manually enable the SMS function

<a href="sms:13300000000">13300000000</a>
Copy the code
  • Click the link on the phone to jump to the SMS page and send a message to the phone number

Mobile mailbox identification

<meta name="format-detection" content="email=no" /> 
Copy the code

Manually enable the email sending function

<a href="mailto:[email protected]">Send E-mail</a>
Copy the code
  • Invoke the mailbox sending function

Enable Internet Explorer and Chrome of the latest version preferentially

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
Copy the code

Mobile default style

  • Default font on mobile

    1. Numbers and English fonts are availableHelveticaFont, IOS and Android have this font
    2. Mobile phone systems have their own default fonts, so use the default fonts
    body{
    font-family: Helvetica; }Copy the code

  • The font size

    If it’s just for your phone, use PX

  • In IOS, links, buttons, etc., are shaded with gray

    a.button.input.textarea{-webkit-tap-highlight-color: rgba(0.0.0.0)}
Copy the code

  • Remove the rounded

    button.input{
    -webkit-appearance:none;
    border-radius: 0;
}
Copy the code

  • Disable text zooming

    html{
     -webkit-text-size-adjust: 100%;
}
Copy the code

Praise support, hand left lingering fragrance, with rongyan, move your rich little hands yo, thank you big guy can leave your footprints.

Past wonderful recommendation

Front-end common encryption methods

Canvas Pit Climbing Road

Don’t know SEO optimization? An article helps you understand how to do SEO optimization

Canvas Pit Road

Wechat small program development guide and optimization practice

Talk about mobile adaptation

Front-end performance optimization for actual combat

Talk about annoying regular expressions

Obtain file BLOB stream address to achieve the download function

Vue virtual DOM confused? This article will get you through the virtual DOM once and for all

Git Git

Easy to understand Git introduction

Git implements automatic push

Interview Recommendations

Front ten thousand literal classics – the foundation

Front swastika area – advanced section

More exciting details: personal homepage