Summary of mobile front end development experience

This document is aimed at mobile front-end development, including web pages in hybrid and non native applications.

Invalid Sign

If you want to use the pseudo class of the element to realize the press activation state, you need to know the following questions:

Almost any browser input (textarea) on IOS has internal shadow by default, but @ r cannot be used_ 209_ 2419 @ - shadow to clear. If you don't need shadows, you can turn them off as follows:

input,
textarea {
    /* 方法1: 去掉边框 */
    border: 0;

    /* 方法2: 边框色透明 */
    border-color: transparent;

    /* 方法3: 重置输入框默认外观 */
    -webkit-appearance: none;
    appearance: none;
}

The phone is on Android browser 4.4.2 (not tested in other versions). If you use border radius and the - WebKit transform attribute, when you use the translatez or translate3d value, the fillet will have a problem:

.test {
    border: 2px solid red;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: gray;
    @R_209_2419@-shadow: 0 2px 5px rgba(0, 0, 0, .3);
    -webkit-transform: translate(0, 0) translatez(0);
    transform: translate(0, 0) translatez(0);
}

<div class="test"></div>

In the above code, - WebKit transform: translate (0, 0) translatez (0) will cause the fillet cannot wrap the background color.

Of course, - WebKit transform: translate3d (0, 0, 0) is the same, so if your scene is like this, you can directly use - WebKit transform: translate (0, 0) to avoid this problem

Invalid Sign

The main reason for this problem is that CSS has different processing methods for background clip, which can usually be border - @ R_ 209_ 2419@ | padding-@R_ 209_ 2419@ | content-@R_ 209_ 2419 @ these three ways.

The default trimming method of the browser is border - @ R_ 209_ 2419 @, that is, the background outside the overflow border will be reduced.

For the above mobile phones that cannot trim the background outside the border, define the value as padding - @ R_ 209_ 2419@ | content-@R_ 209_ 2419 @ can fix this problem, but padding - @ r is more recommended_ 209_ 2419@。 Because using content - @ r_ 209_ 2419 @, if padding is defined and is not 0, the background will not be covered with elements.

When developing on the mobile platform, it is very simple to draw a circle with CSS, only one sentence of code is required:

.circle {
    border-radius: 50%;
}

However, on Android browser 2. *, this definition will be invalidated and displayed as the default rectangle.

Because Android browser2. Does not support using percentage as the value of border radius, if you need to be compatible with Android browser2., you can:

.circle {
    width: 10rem;
    height: 10rem;
    border-radius: 5rem;
}

If you think this definition is not flexible enough and want to be lazy, you can preset a large value for border radius, such as 100rem, to avoid that when the size of the element changes, the fillet radius also changes, unless the size of the element exceeds the preset threshold.

When the mobile device switches between horizontal and vertical screens, the text size will be recalculated and scaled accordingly. When we don't need this situation, we can choose to prohibit:

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

<7> Email address recognition on Android (not IOS), the browser will automatically recognize the string that looks like the email address. Whether you add the email link or not, when you long press on this string, you will pop up a prompt to send email.

Turn off email address identification:

<Meta name="format-detection" content="email=no" />

Turn on mail sending:

<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>

<8> How to prohibit saving or copying images? Usually, when you long press img on your mobile phone or pad, the option to store or copy images will pop up. If you don't want users to do so, you can prohibit img by the following methods:{

-webkit-touch-callout: none;

}PS: it should be noted that this method is only effective on IOS < 9 > cancel the touch highlighting effect on the mobile terminal. When making the mobile terminal page, you will find that when all a tags trigger clicking or all elements with pseudo class: active are set, the highlighting box will be displayed by default in the active state. If you don't want this highlighting, you can disable it through CSS through the following methods:

`.xxx {

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}`This setting works on most machines. However, the mobile terminal Samsung comes with its own browser. When you click any a tag on the page, there will still be a shadow background color when you set - WebKit tap highlight color: RGBA (0,0,0,0), which should be added by the browser forcibly and cannot be overwritten through code settings.

A compromise method is to replace the a tag of the page's unreal jump link with another tag, which can solve this problem< 10> The mobile terminal prohibits selecting content. If you don't want users to be able to select content in the page, you can disable it in CSS:

div {
    -webkit-user-select: none;
}

It's that simple, but currently only browsers that support the WebKit kernel. Find these today and continue tomorrow;