1, clear float float to our code to bring trouble, presumably need not say more, we will use a lot of ways to avoid this trouble, I think the most convenient is also the compatibility of the best one is.... // Clear float. Clearfix {zoom: 1; } .clearfix:after{ display: block; content:' '; clear: both; } 2, vertical horizontal center in the CSS world horizontal center is easier than vertical center, after years of evolution, there is still no good way to center elements vertically (each method has advantages and disadvantages, but can not achieve good compatibility, less destructive goal), The following are several common implementations: Absolute position with known width and height position: Absolute; top: 50%; left: 50%; margin-top: -3em; margin-left: -7em; width: 14em; height: 6em; Translate position: Absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); Display: flex; display: flex; display: flex; align-items: center; justify-content: center; 3. Add ellipsis at the end of text when the text is out of the container's width, we want to add ellipsis by default to prompt the user to omit the content. Fixed width, suitable for single line display... overflow: hidden; text-overflow: ellipsis; white-space: nowrap; Width is not fixed, suitable for multiple lines and mobile display overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; When we want to create a sense of blurring the text, we can do this. The text - shadow: 0 0 2 px rgba (0, 0,. 5); Loading :after{display: inline-block; loading:after{display: inline-block; overflow: hidden; vertical-align: bottom; content:'\ 2026'; -webkit-animation: ellipsis 2s infinite; } @-webkit-keyframes ellipsis{from{width: 2px; } to{ width: 15px; By default, when we select text on a web page, we give the selected part of the text a dark blue background color (try using the mouse yourself). What if we want to customize the style of the selected part of the text? Select the background color element:: Selection {color: green; background-color: pink; } element::-moz-selection{ color: green; background-color: pink; Sometimes there is a requirement to add a sticker bar to a list of newly added or popular items on a display page, like the fork Me on Github effect on hexo's default blog, as shown below. Next, we will step through the leftmost effect HTML <div class="wrap">
  <div class="ribbon">
    <a href="#">Fork me on GitHub</a> </div> </div> CSS /* height:160px; overflow:hidden; position: relative; background-color:#f3f3f3;
}

.ribbon{
  background-color: #a00;
  overflow: hidden;
  white-space: nowrap;
  position: absolute;
  /* shadom */
  -webkit-box-shadow: 0 0 10px # 888;
  -moz-box-shadow: 0 0 10px # 888;
  box-shadow: 0 0 10px # 888;
  /* rotate */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  /* position */
  left: -50px;
  top: 40px;
}

.ribbon a{
  border: 1px solid #faa;
  color: #fff;display: block; The font: bold 81.25%'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: 1px 0;
  padding: 10px 50px;
  text-align: center;
  text-decoration: none;
  /* shadow */
  text-shadow: 0 0 5px # 444;} 8, Input placeholder When we place placeholder attributes for some input types, we will sometimes need to change the default style. input::-webkit-input-placeholder{ color: green; background-color:#F9F7F7;
  font-size: 14px;
}
input::-moz-input-placeholder{
  color: green;
  background-color: #F9F7F7;
  font-size: 14px;
}
input::-ms-input-placeholder{
  color: green;
  background-color: #F9F7F7;font-size: 14px; } 9. On mobile browsers, when you click on a link or a Javascript defined clickable element, there will be a blue border. - its - tap - highlight - color: rgba (255255255, 0); Element :first-letter{element:first-letter{element:first-letter{float:left; color:green; font-size:30px; Triangle {/* base style */ border:solid 10px transparent; } /* bottom */.triangle. Bottom {border-top-color: green; } /* on */.triangle. Top {border-bottom-color: green; } /* left */.triangle. Top {border-right-color: green; } /* right */.triangle. Top {border-left-color: green; } A submit input is a form of "a submit input" for the following elements: a submit input is a form of "a submit input" for the following elements:type="iamge"]
input[type="button"]
button
label
selecta[href],input[type='submit'], input[type='image'],input[type='button'], label[for], select, button { cursor: pointer; If you visit a mobile site, you will notice some gray boxes around the selected elements. Use the following code to disable this style: -webkit-touch-callout: None; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;Copy the code

A {-webkit-tap-highlight-color:rgba(0,0,0,0)} Textarea,input{appearance:none} <meta name="format-detection" contnent="telephone=no"> 5. : active compatible processing (1) add ontouchstart to body (2) the document. The addEventListener ('touchstart'.function() {},falseBackground-clip :padding-box; IE10 Inputy input:ms-clear{display:none} 7.IE10 Inputy input:ms-clear{display:none}Copy the code

* { margin: 0; padding: 0; text-decoration: none; -webkit-overflow-scrolling: touch ! important; /*iOS inertial scroll */ outline: none; -webkit-font-smoothing: antialiased; / / -Moz-osx -font Smoothing: grayscale; } body { position: relative; margin: 0 auto; width: 100%; height: 100%; min-width: 900px; overflow-x: hidden; font-family:Microsoft Yahei; -webkit-touch-callout: none; /* Disable the popup menu when long pressing the page */ -webkit-tap-highlight-color: white; box-sizing: border-box; } li { list-style: none; } ul, ol { list-style-type: none; } select, input, img, select { vertical-align: middle; } img { border: none; display: inline-block } i { font-style: normal } a { text-decoration: none; -webkit-appearance: none; } *:focus { outline: none; } input, textarea, button { resize: none; -webkit-appearance: none; outline: none; } input { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } strong { font-weight: bold; } h3, h4 { font-weight: normal } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color:#cecece;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
	color: #cecece;
}

input[type="button"],
input[type="submit"],
input[type="file"], button { cursor: pointer; -webkit-appearance: none; } table { border-collapse: collapse; border-spacing: 0; } .hover-hand { cursor: pointer; / / dont select copy*/. Dont select {-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none; } / *float*/

.left {
	float: left;
}

.right {
	float: right;
}

.clearfloat:after {
	content: ""; display: block; height: 0; clear: both; zoom: 1; visibility: hidden; } .clearfloat { zoom: 1; clear: both; } .clear { clear: both; zoom: 1; } .hide { display: none ! important; } .show { display: block; } /*font-size*/ .font12 { font-size: 12px; } .font13 { font-size: 13px; } .font14 { font-size: 14px; } .font15 { font-size: 15px; } .font16 { font-size: 16px; } .font18 { font-size: 18px; } .font19 { font-size: 19px; } .font20 { font-size: 20px; } .font22 { font-size: 22px; } .font24 { font-size: 24px; } .font26 { font-size: 26px; } .font28 { font-size: 28px; } .font30 { font-size: 30px; } .font32 { font-size: 32px; } .font36 { font-size: 36px; } .font48 { font-size: 48px; } .font60 { font-size: 60px; } .color-white { color: white; } .color-red { color: red; } .color-green { color: green; } .color-black { color: black; } .cl1685d3 { color:#1685D3;
}

.bg1685D3 {
	background: #1685D3;} .color-blue { color: blue; } .color-yellow { color: yellow; } .color-pink { color: pink; } .bg-yellow { background: yellow; } .bg-red { background: red; } .border-blue { border: 1px solid blue; } .border-black { border: 1px solid black; } .border-white { border: 1px solid white; } .tc { text-align: center; } .tl { text-align: left; } .tr { text-align: right; } /* Display ellipsis */. One-line {overflow: hidden; white-space: nowrap; text-overflow: ellipsis; /* Clip the text. */ } .more-line { display: -webkit-box ! important; overflow: hidden; text-overflow: ellipsis; word-break:break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } /*flex*/ .flex { display: flex; flex-wrap: nowrap; flex-direction: row; flex-flow: row nowrap; justify-content: flex-start; /*flex-start | flex-end | center | space-between | space-around; */ align-items: flex-start; /*flex-start | flex-end | center | baseline | stretch; */ align-content: flex-start; /*flex-start | flex-end | center | space-between | space-around | stretch; */ align-self: auto; } /* mobile 1px*/.onepx-border:before {content:' '; position: absolute; top: 0px; left: 0px; width: 200%; height: 200%; border: 1px solid blue; transform-origin: 0 0; The transform: scale (0.5, 0.5); box-sizing: border-box; border-radius: 10px; } /* Scrollbar style */ ::-webkit-scrollbar {width: 6px; height: 6px } ::-webkit-scrollbar-track-piece { background:#eee;
}

::-webkit-scrollbar-thumb:vertical {
	background: # 666;
}Copy the code

The second version:

* { margin: 0; padding: 0; border: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Clear a highlight of element after the phone tap event */ text-decoration: none; -webkit-overflow-scrolling: touch ! important; /*iOS inertial scroll */ outline: none; -webkit-font-smoothing: antialiased; / / -Moz-osx -font Smoothing: grayscale; } body { position: relative; margin: 0 auto; width: 100%; height: 100%; min-width: 900px; overflow-x: hidden; font-family:Microsoft Yahei; -webkit-touch-callout: none; /* Disable the popup menu when long pressing the page */ -webkit-tap-highlight-color: white; box-sizing: border-box; -webkit-transform: translateZ(0); /*CSS enable hardware acceleration */ -webkit-backface-visibility: hidden; /* Using CSS transforms or animations may cause page bugs to flicker */} li {list-style: none; } ul, ol { list-style-type: none; } select, input, img, select { vertical-align: middle; } img { border: none; display: inline-block } i { font-style: normal } a { text-decoration: none; -webkit-appearance: none; } *:focus { outline: none; } input, textarea, button { resize: none; -webkit-appearance: none; /* Remove the browser default style, such as chrome input default style */ outline: None; } input { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } strong { font-weight: bold; } h3, h4 { font-weight: normal } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color:#cecece;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
	color: #cecece;
}

input[type="button"],
input[type="submit"],
input[type="file"], button { cursor: pointer; -webkit-appearance: none; } table { border-collapse: collapse; border-spacing: 0; } .hover-hand { cursor: pointer; }. Use -3d {-webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */ -webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */ transform: rotateY(60deg); transform-style: preserve-3d; }.perspective {/* Perspective Perspective: The presence of this property determines whether the element you see is 2D or 3D. Typically set on the parent class of the enclosing element. */ perspective: 400px; } /* disallow copy*/. Dont -select {-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none; } / *float*/

.left {
	float: left;
}

.right {
	float: right;
}

.clearfloat:after {
	content: ""; display: block; height: 0; clear: both; zoom: 1; visibility: hidden; } .clearfloat { zoom: 1; clear: both; } .clear { clear: both; zoom: 1; } .hide { display: none ! important; } .show { display: block; } /*font-size*/ .font12 { font-size: 12px; } .font13 { font-size: 13px; } .font14 { font-size: 14px; } .font15 { font-size: 15px; } .font16 { font-size: 16px; } .font18 { font-size: 18px; } .font19 { font-size: 19px; } .font20 { font-size: 20px; } .font22 { font-size: 22px; } .font24 { font-size: 24px; } .font26 { font-size: 26px; } .font28 { font-size: 28px; } .font30 { font-size: 30px; } .font32 { font-size: 32px; } .font36 { font-size: 36px; } .font48 { font-size: 48px; } .font60 { font-size: 60px; } .color-white { color: white; } .color-red { color: red; } .color-green { color: green; } .color-black { color: black; } .cl1685d3 { color:#1685D3;
}

.bg1685D3 {
	background: #1685D3;} .color-blue { color: blue; } .color-yellow { color: yellow; } .color-pink { color: pink; } .bg-yellow { background: yellow; } .bg-red { background: red; } .border-blue { border: 1px solid blue; } .border-black { border: 1px solid black; } .border-white { border: 1px solid white; } .tc { text-align: center; } .tl { text-align: left; } .tr { text-align: right; } /* Display ellipsis */. One-line {overflow: hidden; white-space: nowrap; text-overflow: ellipsis; /* Clip the text. */ } .more-line { display: -webkit-box ! important; overflow: hidden; text-overflow: ellipsis; word-break:break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }. Auto-gp {/* auto-wrap */ word-wrap:break-word; word-break: normal; } /*flex*/ .flex { display: flex; flex-wrap: nowrap; flex-direction: row; flex-flow: row nowrap; justify-content: flex-start; /*flex-start | flex-end | center | space-between | space-around; */ align-items: flex-start; /*flex-start | flex-end | center | baseline | stretch; */ align-content: flex-start; /*flex-start | flex-end | center | space-between | space-around | stretch; */ align-self: auto; } /* mobile 1px*/.onepx-border:before {content:' '; position: absolute; top: 0px; left: 0px; width: 200%; height: 200%; border: 1px solid blue; transform-origin: 0 0; The transform: scale (0.5, 0.5); box-sizing: border-box; border-radius: 10px; } /* Scrollbar style */ ::-webkit-scrollbar {width: 6px; height: 6px } ::-webkit-scrollbar-track-piece { background:#eee;
}

::-webkit-scrollbar-thumb:vertical {
	background: # 666;
}
Copy the code

Resolve the white space at the bottom of img elements

The appearance of a blank

Doing web design can’t avoid adding images to your web page. Some cool images can add color to your web page. You already know how to add an image to a web page, just use the < img > tag. Today we are going to look at a small problem in the process of adding images. Why there is a gap at the bottom of the image. Please click to view the code:

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div style="border: 1px solid red;"> <! < img SRC = < img SRC ="http://img6.cache.netease.com/henan/2015/5/11/2015051117081131913_500.jpg" alt=""> 
  </div>
</body>
</html>Copy the code

Pretty simple code, right? But will it be as good as we hope? Take a look at the page:

Example 1. PNG

The reason for the whitespace

Inline elements such as < img > align with the baseline of the parent element by default. The baseline is some distance from the parent bottom. That is, the bottom of the < img > element only reaches the blue line in the figure below. Thus, the mystery blank at the bottom of the picture is actually the distance between baseline and bottom.

baseline.png

Resolve the occurrence of whitespace

Now that we know why whitespace occurs, how can we solve the problem? There are three ways:

• Set the vertical-align of the image

  img{
    vertical-align: bottom;
  }Copy the code

  You can set any of the three values of vertical-align (top, bottom, and middle).

• Set font size to 0 for the parent element of the image

  div{
    font-size: 0;
  }Copy the code

• Set the display of the image to block

  img{
    display: block;
  }Copy the code

  Effect display after solution:

Example 2. PNG

summary

1. By default, an inline element is aligned with the baseline of the parent element.
2. The gap at the bottom of the picture is actually the distance between baseline and bottom.
3. We can avoid this blank space by setting some CSS styles.

The resources

• In-depth understanding of CSS: font metrics, line-height, and vertical-align
• Why is there white space at the bottom of the IMG element

The above is some thinking and sorting about the blank problem at the bottom of the picture. If there is any deficiency, please give more corrections.

Mobile Web development tips

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

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

<! -- iPhone --> <link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image"> <! -- iPhone (Retina) --> <link href="apple-touch-startup-image-640x960.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <! -- iPad (portrait) --> <link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image"> <! -- iPad (landscape) --> <link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image"> <! -- iPad (Retina, portrait) --> <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"> <! -- iPad (Retina, landscape) --> <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 forDifferent devices. If you're creating a universal app, you need to supply app ICONSin 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

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
<meta 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> title </title> <link rel="stylesheet" href="index.css"> </head> <body> Here start content </body> </ HTML >Copy the code

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, and none of them 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 terminal font unit font-size select PX or REM

For mobile devices only, use PX

For the need to adapt to a variety of mobile devices, use REM, for example, 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.

When a user clicks on an element on the screen, such as a jump link , the browser will capture the click first. However, the browser cannot decide whether the user should click the link or double click the area to zoom. Capture after the first click, the browser will Hold for a period of time t, if the users are not in the t time interval to the next click, the browser will do processing, click on the links to jump if t time users a second click operation, the browser will jump, instead of zooming in on the area of the page. 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) - its - user - the 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:#EEEEEE; }
Copy the code

11, Webkit form input box placeholder text can be newline

Ios works, Android doesn’t

12. Turn off 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 property has been removed from the PC and must be set to ‘meta ViewPort’ for this property to take effect on 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

The iDangero Swiper plugin integrates the powerful function of scrolling (3D support) and the built-in scroll bar for rebound scrolling. The official address is:

iDangero

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:

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
<meta 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> <scripttype="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

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
<meta 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> <scripttype="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("Landscape." + window.orientation);
                caseZero:case 180:
                alert("Vertical screen." + 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

<! -- Select photo --> < INPUTtype=file accept="image/*"> <! -- Select video --> < INPUTtype=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 transform and opacity composite properties 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

Framework 1. Mobile terminal infrastructure framework

• The syntax of zepto.js is almost the same as that of jquery, and jquery basically knows zepto~

• Iscroll.js solve the problem that 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 utility features, but does not extend any JavaScript built-in objects.

• Fastclick speeds up mobile click response time

• Animate. CSS CSS3 animation library

• Normalize.css Normalize.css is a modern, elegant alternative to CSS Reset for HTML5

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
• swiper

3. Waterfall flow frame

• masonry

Tools recommended

• Caniuse browsers support HTML5 attribute query
• Paletton mixes colors