Tips for Mobile Development Summary (2)

Summarize some knowledge.

1. Using CSS to penetrate

Common occurrence Scenario: if we need to upload files via input,type= ' file ', the default style of this input can be said to be very "inhuman". So we want to pass a picture, like this input size, the position is uniformly covered above. This time, obviously, clicking on the picture at this time, input will not work. It is because IMG is isolating the click Penetration, and what we want is that this IMG only visually obscures the style of input, but clicks on input. So, just let IMG be able to penetrate.The CSS code is as follows:

Img{pointer-events:none;}

2. Implement a custom native select control style the native style of the select Mobile is ugly, but the native pop-up effect is consistent with our design principles. Directly modify the style of the Select, a strange phenomenon, when debugging on Chrome, its own definition of the style played a role in the Android phone, but not on the iOS phone, a typical incompatibility problem, this time to disable the native style. The CSS code is as follows:

Select{-webkit-appearance:none;}

3. Text overflow processing

Mobile devices are relatively small, and many times the information that is displayed needs to be omitted. The most common is a single-line header overflow omission, multi-line details overflow omitted.

The CSS code is as follows:

Single line. single{   Overflow:hidden;   White-space:nowrap;   Text-overflow:ellipsis;} Multiple lines. more{    display:-webkit-box!important;    Overflow:hidden;    text-overflow:ellipsis;    Work-break;break-all;    -webkit-box-orient:vertical;    

4.300-Millisecond Story

A Web page accessed by a mobile device is a page on a PC. In the default viewport (980px) page, it is often necessary to "double click" or "Pinch open" to enlarge the page to see the page. And it's just to confirm that the user is double-clicking or clicking. Safari needs a 300ms delay to judge. And then the iphone has been the same design, and then the android also used this design. As a result, the "300ms delay" became a norm.

Processing method:

Replace the Click event with a custom tap event. Principle: Record time, finger position at Touchstart, Touchend, compare at Touchend, if the finger position is the same position (or allow to move a very small displacement value) and the time interval is short (generally considered 200ms), And the process has not triggered the touchmove, you can think of triggering the click on the handheld device, it is generally called "tap."

Solutions for 5.TAG Transmission

①. Use the Ease animation to transition the delay of 300ms.

②. The middle-tier DOM element joins, allowing the middle layer to accept this "Pierce" event, Hidden later.

③. " Both up and down "use the Tap event to solve the Tap pass event (but inevitably the native tag's click event).

④. Use the Fastclick library instead.

6. Turn on elastic scrolling

The CSS code is as follows:

body{   Overflow:scroll;   -webkit-overflow-scrolling:touch;}

Note: Android does not support native elastic scrolling, but can be implemented with third-party library Iscroll.

7. Click Not sensitive

Cause: By using touch to trigger a custom tap event, the speed is about 200ms, but the touch event requires a larger hit area and does not even trigger.

Solution:

① uses both Touchend and click to trigger the TAP event, and if the touchend has already been processed, click does not process.

② captures the Click event globally if the Click event is consistent with the hit coordinates of the tap event and is less than 1s apart. The default behavior of the event is blocked at the capture stage and the bubbling is canceled.

8.chrome Debugging shortcut keys

①ctrl+shift+f Full Text Search

②ctrl+o Find file names

③ctrl+shift+o Find JS function name

9. Elastic image

Mainly used in the percent layout, with a parent tag wrapping the img tag, the width of the parent element is changed by the media query.

The CSS code is as follows:

img{  max-width:100%;}

10. One pixel border setting

Many times, you want to keep the border size 1px on any setting, but because 1px uses 2DP rendering, that is, the 2px size is displayed. So, to use the CSS3 scale a bit.

The CSS code is as follows:

. folder li{   position:relative;    padding:5px;}. Folder li+li:before{    Position:absolute;    top:-1px;    left:0;    Content: ";    width:100%;    height:1px;    border-top:1px solid #ccc;    -webkit-transform:scaley (0.5);}

　　

Study hard ...

　　

Tips for Mobile Development Summary (2)