Mobile Web development skills and mobile web development skills

Mobile Web development skills and mobile web development skills

Recently, I have been wondering how to write mobile pages? What should I pay attention? What is the difference with PC pages ?...... There will be a lot of questions. In fact, I may not know how to answer these questions. I have never learned how to create a mobile app, and most of them are coming from work.

I. Mobile phone number identification

On iOS Safari (neither other browsers nor Android), numbers that look like phone numbers are processed as phone links, for example:

• Seven digits, such as: 1234567
• A number with parentheses and a plus sign, for example: (+ 86) 123456789
• A number in the double connection line, for example, 00-00-00111.
• 11 digits, such as: 13800138000

Other types of numbers may also be identified. We can use the following meta to disable automatic identification of phone numbers:

<meta name="format-detection" content="telephone=no" />

Enable the call Function

<a href="tel:123456">123456</a>

Enable SMS:

<a href="sms:123456">123456</a>

2. Mobile Terminal email recognition (Android)

Like phone number recognition, Android will recognize strings that conform to the mailbox format. We can use the followingMetaAutomatic Identification of different email addresses:

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

Similarly, you can use the label attribute to enable the long-press email address pop-up email sending function:

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

Iii. Baidu prohibits Transcoding

When you open a webpage through a Baidu mobile phone, Baidu may transcode Your webpage and post its advertisement to Your webpage, which is very disgusting. However, we can disable this meta tag:

<meta http-equiv="Cache-Control" content="no-siteapp" />

4. Set the background color of the status bar (IOS)

Set the background color of the status bar, which takes effect only when "apple-mobile-web-app-capable" content = "yes"

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

ContentParameters:

• Default: The background of the status bar is white.
• Black: The background of the status bar is black.
• Black-translucent: The background of the status bar is translucent. If it is set to default or black, the webpage content starts from the bottom of the status bar. If it is set to black-translucent, the webpage content is full of the whole screen, and the top is blocked by the status bar.

5. How to define font-family on mobile terminals

Fonts of the three mobile phone systems:

Ios system

• The default Chinese font isHeiti SC
• The default English font isHelvetica
• The default numeric font isHelveticaNeue
• No Fonts

Android system

• The default Chinese font isDroidsansfallback
• The default English and digital fonts areDroid Sans
• No Fonts

Winphone System

• The default Chinese font isDengxian(正)
• The default English and digital fonts areSegoe
• No Fonts

Each mobile phone system has its own default font and does not support. If you have no special requirements, you do not need to define Chinese fonts on the mobile phone end. You can use the default English and digital fonts of the system.Helvetica, Supported by all three systems

* Code for defining fonts on mobile devices */

body{font-family:Helvetica;}

6. font-size on the Mobile End: Select px or rem

For mobile phone devices that only need to be adapted, use px.

To adapt to various mobile devices, use rem. For example, you only need to adapt to devices with relatively different resolutions, such as iPhone and iPad.

Rem configuration reference:

html {    font-size:10px}@media screen and (min-width:480px) and (max-width:639px) {     html {           font-size: 15px     }}@media screen and (min-width:640px) and (max-width:719px) {     html {                font-size: 20px   }}@media screen and (min-width:720px) and (max-width:749px) {    html {          font-size: 22.5px    }}@media screen and (min-width:750px) and (max-width:799px) {    html {        font-size: 23.5px    }}@media screen and (min-width:800px) and (max-width:959px) {    html {        font-size: 25px    }}@media screen and (min-width:960px) and (max-width:1079px) {  html {        font-size: 30px    }}@media screen and (min-width:1080px) {    html {        font-size: 32px    }}

7. Mobile touch events (webkit and winphone are differentiated)

The touch event triggered when the user's finger is placed on the mobile device and sliding on the screen

The following webkit is supported:

• Touchstart-- Occurs when your fingers touch the screen. No matter how many fingers there are currently
• Touchmove-- Triggered continuously when the finger slides on the screen. Normally, when we slide the page, the preventDefault () of event will be called to prevent the occurrence of the default situation: to prevent Page scrolling
• Touchend-- Triggered when the finger leaves the screen
• Touchcancel-- Triggered when the system stops tracking and touch. For example, when a prompt box is displayed on the alert () page during the touch process, this event is triggered and is rarely used.

The following winphone 8 is supported:

• MSPointerDown-- Occurs when your fingers touch the screen. No matter how many fingers there are currently
• MSPointerMove-- Triggered continuously when the finger slides on the screen. Normally, when sliding the screen, the css html {-ms-touch-action: none;} is called to prevent Page scrolling by default.
• MSPointerUp-- Triggered when the finger leaves the screen

8. How to clear the shadow in the input box on the Mobile Terminal

On iOS, the input box has an internal shadow by default, but it cannot be cleared using box-shadow. If you do not need a shadow, you can disable it as follows:

Input, textarea {border: 0;/* method 1 */-webkit-appearance: none;/* method 2 */}

I will share it here today. These tips are very useful in our daily use. If you encounter any bugs at work or have gained any good experience or skills, you can leave a message for me.

 

Coming soon!Xiaoyue blog