This is the best of times, because we are standing in the trend; But it’s also the worst of times, because we’re at the head of the tide.

META related

1. Title added to the home screen (IOS)

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

2. Enable WebApp full-screen mode (IOS)

When the site is added to the home screen and then clicked to launch, the address bar can be hidden (jumping from the browser or entering the link does not have this effect)

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

3. Baidu forbids transcoding

Open the web page through Baidu mobile phone, Baidu may transcode your web page, to your page with its ads, very disgusting. However, we can disable it with this meta tag:

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

Baidu SiteApp transcoding statement: t.cn/R28wSBl

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

Set the background color of the status bar. This parameter is valid only if “apple-mobile-web-app-capable” content=”yes”

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

The content parameters:

  • Default: The status bar background is white.
  • Black: The background of the status bar is black.
  • Black-always: Status bar background is translucent. If set to Default or Black, the content of the web page starts at the bottom of the status bar. If set to Black-always, the page content always fills the screen, the top obscured by the status bar.

5. Mobile Phone number Recognition (IOS)

On iOS Safari (other browsers and Android don’t), numbers that look like phone numbers are processed as phone links, such as:

  • The value is a seven-digit number, for example, 1234567
  • A number followed by a plus sign is in the form of :(+86)123456789
  • The number of the double connection cable is in the format of 00-00-00111
  • The value is an 11-digit number, for example, 13800138000

There may be other types of numbers that are recognized as well. We can turn off automatic identification of phone numbers with the following meta:

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

Enabling the Phone Function

<a href="tel:123456">123456</a>Copy the code

Enable the SMS function:

<a href="sms:123456">123456</a> Copy the code

6. Mobile Mailbox recognition (Android)

As with phone numbers, android recognizes strings that match the email format. We can use the following meta to control automatic email recognition:

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

Similarly, we can also use the label attribute to enable the function of holding down the email address to pop up an email:

<a mailto:[email protected]">[email protected]</a> Copy the code

7. Add Smart App Banner (IOS 6+ Safari)

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">Copy the code

8. IOS Web App starts animation

The iPad splash screen does not include the status bar area. So to launch the image, subtract 20px from the direction of the status bar area, and subtract 40px from the retina device.

<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">

<link href="apple-touch-startup-image-640x960.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">

<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">

<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

<link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">Copy the code

(landscape, landscape | portrait: the vertical screen)

9. APP icon added to the home screen

There are two slightly different ways to specify the icon path after the Web App is added to the home screen:

<! <link href="short_cut_114x114.png" rel="apple-touch-icon-precomposed"> <! <link href="short_cut_114x114.png" rel="apple-touch-icon">Copy the code
  • Apple-touch-icon: in IOS6 and below the icon will automatically add a layer of highlights (IOS7 has been flat design style)
  • Apple-touch-icon-precomposed: Using “Design ICONS”

Effect:

Icon size:

You can provide different ICONS for different devices by specifying the size attribute (generally, you only need to provide an icon of 114 x 114 Pixels).

The official instructions are as follows:

Create different sizes of your app icon for different devices. If you’re creating a universal app, you need to supply app 
icons in all four sizes.
For iPhone and iPod touch both of these sizes are required:
57 x 57 pixels
114 x 114 pixels (high resolution)
For iPad, both of these sizes are required:
72 x 72 pixels
144 x 144 (high resolution)Copy the code

10. Use Internet Explorer and Chrome of the latest version first

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

11. The viewport template

<html> <head> <meta charset="utf-8"> <meta The content = "width = device - width, initial - scale = 1.0, the maximum - scale = 1.0, user - scalable = no" name = "viewport" > < meta content = "yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta Content ="telephone=no" name="format-detection"> <meta Content ="email=no" name="format-detection"> <title> <link rel="stylesheet" href="index.css"> </head> <body>Copy the code

Q&A

1. How to define font font-family on mobile terminal

Fonts for the three major mobile systems:

iOS

  • The default Chinese font is Heiti SC
  • The default English font is Helvetica
  • The default numeric font is HelveticaNeue
  • No Microsoft Yahei font

The Android system

  • The default Chinese font is Droidsansfallback

  • The default English and digital font is Droid Sans

  • No Microsoft Yahei font

Winphone system

  • The default Chinese font is Dengxian

  • The default English and digital font is Segoe

  • No Microsoft Yahei font

Each mobile phone system has its own default font, which does not support Microsoft Yahei. If there is no special requirement, there is no need to define Chinese font on the mobile phone. Helvetica can be used for the system default English font and digital font, which are supported by all three systems.

< font style = "box-sizing: border-box; }Copy the code

2, mobile font unitfont-sizechoosepxorrem

  • For mobile devices that only need to be adapted, usepxCan be
  • For the need to adapt to a variety of mobile devices, useremFor example, you only need to adapt to iPhone and iPad and other devices with relatively large resolution differences

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: Mso-font-kerning: 0pt; mso-font-kerning: 0pt; mso-font-kerning: 0pt; Padding-top: 0px; padding-bottom: 0px; padding-bottom: 0px; padding-bottom: 0px; padding-bottom: 0px; 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 } }Copy the code

3, mobile terminal touch events (distinguish Webkit and Winphone)

The Touch event that is triggered when the user slides a finger across the screen of the mobile device

Webkit is supported below

  • Touchstart – occurs when a finger touches the screen. No matter how many fingers there are
  • Touchmove – triggered continuously when a finger is swiped across the screen. Normally, the event preventDefault() is called to prevent scrolling by default
  • Touchend – Triggered when the finger leaves the screen
  • Touchcancel — Triggered when the system stops tracking a touch. For example, when the page alert() is suddenly a prompt box in the touch process, this event will be triggered. This event is seldom used

Winphone 8 is supported below

  • MSPointerDown – occurs when a finger touches the screen. No matter how many fingers there are
  • MSPointerMove – Triggered continuously as a finger slides across the screen. HTML {-ms-touch-action: none; } prevents the default from happening: prevents the page from scrolling
  • MSPointerUp – triggered when the finger leaves the screen

4, mobile terminal click screen generated 200-300 ms delay response

Web pages on mobile devices have a delay of 300ms, and playing with them will cause button click delay or even click failure.

Here are the historical reasons:

In 2007, Apple released safari on IOS system on the first iPhone. In order to better display large screen web pages suitable for PC on mobile phone, it adopted the scheme of double tap to Zoom. For example, you opened a web page on PC with a browser on mobile phone. You may see that the page content can fill the whole screen, but the fonts and pictures are very small. At this time, you can quickly double click on a part of the screen, and you can see the enlarged content of the part. After double clicking again, you can return to the original state.

Double-zooming is two quick finger taps on the screen, and Safari, which comes with iOS, zooms the page to its original scale.

Reason out of the need to determine how fast the browser and click on, when users click on the screen when a certain element, such as the jump link, the browser will click to capture the first time, but the browser can’t decide the user is simply click the link or double-click the zoom parts for operation, therefore, captured after the first click, the browser will Hold for a period of time t, If the user does not click the page next time within T, the browser will click the jump link. If the user clicks the page for the second time within T, the browser forbids the jump and zooms the page in this part. So what is the time interval t? In IOS Safari, it’s about 300 milliseconds. That’s where the delay comes in. For Web developers, it takes 300ms for the callback function processing of page JS to capture the click event to take effect, which indirectly affects the processing of other business logic.

Solution:

  • Fastclick solves the 300ms delay for click events on mobile phones
  • Zepto’s Touch module, tap events are also designed to solve the lag problem at click

Response order of touch events

1, onTouchStart 2, onTouchMove 3, onTouchEnd 4, onclickCopy the code

To solve the 300ms delay problem, you can also speed up the response to events by binding onTouchStart events.

5. What is Retina display and what are the problems

Retina: A liquid crystal display with ultra-high pixel density. The number of pixels displayed on the same size screen changes from one to multiple. For example, on the same strip screen, the Number of pixels on the Retina display of Apple devices changes from one to four

Bitmaps on high-definition displays are enlarged and blurred, so mobile visuals are often designed to be twice as large as traditional PCS.

So, the front-end solution is:

Ensure that the length and width of the image cut out from the design draft is even, and use backgroud-size to reduce the image to 1/2 of the original size

CSS {width:100px; width:100px; height:100px; background-size:100px 100px; }Copy the code

Other elements should be given the same value as before, such as a 40px font for the visual draft, using a 20px style

.css{font-size:20px}Copy the code

6. How to remove the translucent gray mask generated when elements are touched in ios system

Ios users click on a link and a translucent gray mask appears. If you want to disable it, you can remove the translucent gray mask by setting -webkit-tap-highlight-color’s alpha value to 0.

A, button, input, textarea {- its - tap - highlight - color: rgba (0,0,0,0;) }Copy the code

7. How to remove the border generated when elements are clicked in some Android systems

When android users click on a link, a border or translucent gray mask will appear, depending on the manufacturer’s definition of the effect, can be set to -webkit-tap-highlight-color alpha value of 0 to remove some of the machine’s inherent effects.

A, button, input, textarea {- its - tap - highlight - color: rgba (0,0,0,0;) -webkit-user-modify:read-write-plaintext-only; }Copy the code

-webkit-user-modify has the side effect that the input method can no longer enter multiple characters.

In addition, some models cannot be removed, such as the Mi 2

There is another option for button classes, instead of using an A or input tag, use a div tag

Winphone system A. How to remove the translucent gray background generated when the input label is clicked

<meta name="msapplication-tap-highlight" content="no">Copy the code

9. How to reset the default appearance of webKit form elements

.css{-webkit-appearance:none; }Copy the code

10, WebKit form input box placeholder color value can be changed

input::-webkit-input-placeholder{color:#AAAAAA; } input:focus::-webkit-input-placeholder{color:#ECopy the code

11, Webkit form input box placeholder text can be newline

IOS works, Android doesn’t

  1. Disable automatic capitalization on the iOS keyboard

In iOS, the keyboard is capitalized by default. If this is enabled, it works like this:

<input type="text" autocapitalize="off" />Copy the code

13. Turn off iOS input autocorrection

As well as automatically capitalizing English input, IOS also has a feature that automatically corrects input by default, so users often have to do it twice. If you don’t want to turn this feature on, you can turn it off with the input attribute:

<input type="text" autocorrect="off" /> Copy the code

14. Disable text zooming

When the mobile device switches between vertical and horizontal screens, the text size will be recalculated and scaled accordingly. When we do not need this situation, we can choose to disable:

HTML {- its - text - size - adjust: 100%; }Copy the code

Note that this attribute has been removed from the PC and must be set to the meta ViewPort to take effect on the mobile.

15. How to clear shadows in input box on mobile terminal

On iOS, the input box has an internal shadow by default, but you can’t clear it with box-shadow. If you don’t need a shadow, you can turn it off like this:

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

16. Fast rebound roll

Let’s take a look at the history of rebound scrolling in mobile browsers:

  • In the early days, mobile browsers didn’t support scrollbars that weren’t body elements, so they used iScroll;
  • Android 3.0/iOS fixes scrolling for non-body elements, but the scroll bar is not visible and scrolling can only be done with 2 fingers on iOS.
  • Android 4.0 fixed the invisibility of the scrollbar and added the quick rebound scrolling effect, which was later removed;
  • IOS 5.0 has fixed scroll bar invisibility and added fast rebound scrolling

On iOS if you want an element to have scrolling like Native, you can do this:

 .xxx {
        overflow: auto; /* auto | scroll */
        -webkit-overflow-scrolling: touch;
    }Copy the code

PS: iScroll doesn’t feel very good after using it and has some weird bugs. Here is another iDangero Swiper plugin. This plugin integrates the powerful function of scrolling through the screen (3D support) and has a built-in scroll bar for rebound scrolling. IDangero official address: :www.idangero.us/swiper/#.VX_t9PmEB8Y

17. Disable the selected content on the mobile terminal

If you don’t want the user to be able to select the content of the page, you can disable it in CSS:

.user-select-none { -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all (mobile not required) */ -ms-user-select: none; /* IE 10+ */ }Copy the code

18. Unhighlight touch on mobile

When making mobile pages, you will find that all a tags are highlighted when clicking or all elements with pseudo-class :active are activated by default. If you don’t want this highlight, you can disable it globally by using CSS:

html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}Copy the code

However, this method does not work on Samsung’s machines, and a compromise is to replace the A TAB of the page with another TAB to solve this problem.

19. How to disable Saving or Copying images (IOS)

Usually when you hold down the image img on your phone or pad, the option to save the image or copy the image will pop up. If you don’t want the user to do this, you can disable it by:

img { -webkit-touch-callout: none; }Copy the code

20. Hover effect

The effect of touching the button on the mobile end can show the user that something is about to happen, which is a good experience. However, there is no mouse pointer in the mobile device, and the use of CSS hover cannot meet our needs. Fortunately, there is an active effect of CSS activation abroad, the code is as follows:

<html> <head> <meta charset="utf-8"> <meta The content = "width = device - width, initial - scale = 1.0, the maximum - scale = 1.0, user - scalable = no" name = "viewport" > < meta content = "yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <style Type = "text/CSS" > a {- its - tap - highlight - color: rgba (0,0,0,0); } .btn-blue{display:block; height:42px; line-height:42px; text-align:center; border-radius:4px; font-size:18px; color:#FFFFFF; background-color: #4185F3; } .btn-blue:active{background-color: #357AE8; } </style> </head> <body> <div class="btn-blue"> button </div> <script type="text/javascript"> document.addEventListener("touchstart", function(){}, true) </script> </body> </html>Copy the code

Compatibility with ios5+, some android 4+, and winphone 8

To achieve full compatibility, you can bind onTouchStart and onTouchEnd to control the button’s class name.

<html> <head> <meta charset="utf-8"> <meta The content = "width = device - width, initial - scale = 1.0, the maximum - scale = 1.0, user - scalable = no" name = "viewport" > < meta content = "yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <style Type = "text/CSS" > a {- its - tap - highlight - color: rgba (0,0,0,0); } .btn-blue{display:block; height:42px; line-height:42px; text-align:center; border-radius:4px; font-size:18px; color:#FFFFFF; background-color: #4185F3; } .btn-blue-on{background-color: #357AE8; } </style> </head> <body> <div class="btn-blue"> button </div> <script type="text/javascript"> var btnBlue = document.querySelector(".btn-blue"); btnBlue.ontouchstart = function(){ this.className = "btn-blue btn-blue-on" } btnBlue.ontouchend = function(){ this.className = "btn-blue" } </script> </body> </html>Copy the code

21. Screen rotation events and styles

The event

Window. Orientation: plus or minus 90 indicates landscape mode, while 0 and 180 indicate portrait mode.

window.onorientationchange = function(){ switch(window.orientation){ case -90: case 90: Alert (" + window :" + window.orientation); Case 0: case 180: alert(" + window.orientation); break; }}Copy the code

style

@media All and (orientation:portrait) {.css{}} @media All and (orientation:landscape) {.css{}}Copy the code

22. The Audio and video elements do not play automatically on ios and Android

Solution: Touch-screen broadcast

$('html').one('touchstart',function(){
    audio.play()
})Copy the code

23. Shake the function

HTML5 deviceMotion: An event that encapsulates motion sensor data and can obtain data such as motion acceleration of the mobile phone in the state of motion.

24. Take and upload pictures on your phone

Accept attribute

<! <input type=file accept="image/*"> <input type=file accept="video/*">Copy the code

Summary of use:

  • IOS has the functions of taking photos, recording videos, and selecting local images
  • Some Android devices only have the ability to select local images
  • Winphone does not support
  • The input control has an ugly appearance by default

25. Eliminate the Transition screen

.css{/* Set how to render embedded elements in 3D space: preserve 3D*/ -webkit-transform-style: preserve-3d; */ -webkit-backface-visibility: hidden; }Copy the code

Enabling Hardware Acceleration

  • Resolve the blinking page
  • Keep the animation flowing
  .css {
     -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
     -ms-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
  }Copy the code

Several elements of designing high performance CSS3 animation

  • Design CSS3 animations using the composite properties transform and opacity whenever possible
  • Do not use position’s left and top for positioning
  • Enable GPU acceleration with translate3D

26. Remove the voice input button from Android

input::-webkit-input-speech-button {display: none}Copy the code

The framework

1. Mobile terminal infrastructure

  • Zepto. Js syntax is almost the same as jquery, jquery can basically zepto;
  • Iscroll.js solve the page does not support elastic scrolling, fixed does not support the problem ~ achieve drop-down refresh, slide screen, zoom and other functions;
  • The underscore. Js library provides a whole set of functional programming utilities, but does not extend any JavaScript built-in objects;
  • Fastclick speeds up mobile click response time
  • Animate. CSS CSS3 animation library

2. Slide screen frame

Suitable for sliding up and down screen, left and right screen and other sliding screen switching effect

  • slip.js
  • iSlider.js
  • fullpage.js

3. Waterfall flow frame

  • masonry

Tools recommended

  • Caniuse browsers support HTML5 attribute query
  • Paletton mixes colors

The article comes from: ljinkai. Making. IO / 2015/06/06 / mobile – web – skill/author: KaiKaiLiu

Did this article help you? Welcome to join the front End learning Group wechat group: