Mobile Web Development Tips

Recently people have been asked, mobile page How to write ah? What are you paying attention to? What's the difference between a PC page?  ...... There will be a lot of questions. In fact, I have to answer these questions may not know how to answer the small partners. I also did not specialize in the production of mobile, most of them are slowly after the work of the elusive. Xiao Yue Blog These days will be dedicated to share on the mobile side of the tips please pay attention to OH

650) this.width=650; "class=" AlignCenter size-full wp-image-937 "src=" http://www.aliyue.net/wp-content/uploads/2016 /05/webapp02.png "alt=" webapp02 "width=" "height=" "style=" height:auto;vertical-align:middle;border:0px; text-align:center;margin:0px auto; "/>

Let's share some tips on mobile Web development today!

first, mobile phone number identification

In IOS Safari (no other browsers and Android), the numbers that look like phone numbers are treated as phone links, such as:

• • 7 digits, shaped like: 1234567

  • Numbers with brackets and plus signs, shaped like: (+86) 123456789

  • Number of double connection lines, shaped like: 00-00-00111

  • 11 digits, shaped like: 13800138000

There may be other types of numbers that are also identified. We can turn off auto-recognition of phone numbers by following meta:

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

Turn on phone function

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

To turn on the SMS feature:

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

second, Mobile mailbox Identification (Android)

As with the identification of the phone number, the string that conforms to the mailbox format is recognized on Android, and we can automatically identify the mailbox by using the following meta :

<meta content= "Email=no" name= "Format-detection"/>

Similarly, we can also use the Tag property to turn on the long-by-email address pop-up message sending function:

<a Mailto:[email protected] ">[email protected]</a>

third, Baidu banned transcoding

Baidu Mobile phone to open the page, Baidu may be on your page transcoding, to your page affixed to its ads, very disgusting. But we can use this META tag to disable it:

<meta http-equiv= "Cache-control" content= "No-siteapp"/>

iv. Setting the background color of the status bar (IOS)

Sets 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"/>

Content Parameters:

• • Default: The status bar background is white.

• • Black: The status bar background is dark.

  • black-translucent : The status bar background is translucent. If set to default or black, the page content starts at the bottom of the status bar. If set to Black-translucent, the page content fills the entire screen, and the top is obscured by the status bar.

v. How to define font font-family on the mobile side

Font of the three major mobile phone systems:

iOS system

• • The default Chinese font is Heiti SC

  • The default English font is Helvetica

  • The default digital font is helveticaneue

  • No Microsoft Ya-Black font

Android system

• • The default Chinese font is droidsansfallback

  • The default English and digital fonts are Droid Sans

  • No Microsoft Ya-Black font

Winphone system

• • Default Chinese font is Dengxian(founder and other line body)

  • The default English and digital fonts are Segoe

  • No Microsoft Ya-Black font

Each phone system has its own default font, and does not support Microsoft YA black without special needs, mobile phone without the definition of Chinese fonts, using the system default English fonts and digital fonts can use Helvetica , three systems are supported

* Code to define fonts on the mobile side */

Body{font-family:helvetica;}

VI. Mobile font unit font-size Select px or REM

For devices that only need to be adapted to a mobile device, use the PX

For devices that need to be adapted to a variety of mobile devices, use REM, such as a device that only needs to be adapted to 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   &NBSP,}} @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    }}

Vii. Mobile Touch events (differentiate between WebKit and Winphone)

Touch events that trigger when a user's finger is placed on a mobile device that slides on the screen

The following support WebKit

• Touchstart-occurs when the finger touches the screen. No matter how many fingers are present

• Touchmove-a continuous trigger when the finger is sliding on the screen. Usually we slide the page again, and the Preventdefault () that invokes the event can prevent the default from happening: Prevent page scrolling

• touchend-triggers when the finger leaves the screen

• touchcancel--triggers when the system stops tracking touch. For example, in the process of touching a sudden page alert () A prompt box, which will trigger the event, this event is less used

The following support Winphone 8

• Mspointerdown-occurs when the finger touches the screen. No matter how many fingers are present

• Mspointermove-a continuous trigger when the finger is sliding on the screen. Usually we slide the screen again, will call the CSS Html{-ms-touch-action:none;} You can prevent the default from happening: Prevent page scrolling

• Mspointerup-triggers when the finger leaves the screen

Viii. How to clear the Shadows in the input box on the mobile side

On iOS, the input box defaults to an inner shadow, but cannot be cleared using Box-shadow, which can be turned off if no shadow is needed:

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

Share it today, these tips are very useful in our daily use. If you encounter any bugs at work or have gained some good experience, you can leave a message for me.

This article is from the "Xiao Yue Blog" blog, please be sure to keep this source http://aliyue.blog.51cto.com/11564403/1782209

Mobile Web Development Tips