Day 134th: Some summary of mobile Web development (II.)

1. Responsive layout

Develop a page that can be displayed perfectly on all devices.

Media query: @media screen and (max-width:100px) {} Media Type: Screens

Print (printer)
Handheld (handheld device)
All (General)

Common Media Query Parameters:

width--Viewport Width Height
height--Viewport Width Height
device-width--width and height of equipment
device-height--width and height of equipment
Orientation: Check whether the device is in landscape (landscape) or Vertical (portrait)

2, responsive design point design point one: percent layout

Just use media queries to accommodate different fixed-width designs, only switching from one set of CSS to another. There is no smooth gradient between the two designs. With media queries only, layouts can sometimes become uncontrollable.
Of course, this is only a suggestion, there are some pages with a fixed layout of the situation can be very good in some without considering the media query the situation of the device very good display.

Design point two: Elastic image

Idea: Whenever, all wrapped in the image of the width of the element, the largest width of the year to complete the display of pictures.

img{max-height:100%}

Design Point three: Re-layout, show and hide

When the page reaches the screen width of the phone, it is often necessary to abandon some traditional page design ideas. Strive to make the page simple, do the following:
① reduced element size with same proportions
② Adjust page structure layout
③ to hide redundant elements
It is often necessary to switch position elements using "absolute positioning", reducing repainting to improve rendering performance.

Reflections on Responsive Design:

According to the concept of responsive design, a page contains all the different screens of the device style and picture, when a mobile device to access a responsive page, will download the PC, notebook, ipad and other different devices corresponding to the style. These styles are redundant and completely useless.
Pros and Cons: performance is not optimal, but can reduce duplication of development.

3. Special style processing (1) high-definition picture

To render a picture on a mobile Web page, to avoid blurring the image, the width of the image should be rendered in physical pixel units, which is a 100 * 100 picture, which should use 100DP * 10dp.
Width: (W_VALUE/DPR) px;
Height: (W_HEIGHT/DPR) px;

(2) One pixel border

The same is the problem with the Retina screen, the root cause: 1px uses 2DP rendering.
border:0.5px; (error), only iOS8 can use
General Plan: ScaleY (0.5)

(3) Relative unit REM

In order to adapt to the large screen of the mobile phone, px slightly fixed, not according to the size of the size of the change, using relative units to experience page compatibility.
EM: is a relative unit based on the parent node's font-size
REM: is a relative unit based on the font-size of the HTML
Em becomes very difficult to maintain under multi-layered nesting, and REM can be used as a measure of global uniform settings
So, how much is the base value of REM set to be better?
Return purpose: In order to adapt to the big phone screen
REM = SCREEN.WIDTH/20

Cases where REM is not used: font-size

Generally speaking, font-size is a relative unit of REM that should not be used. Because the size of the font is tend to the usefulness of reading, and not suitable for typesetting layout.
In the same vein, tends to the characteristics of some fixed elements. Instead of using REM, we use PX to ensure consistency on different screens (as opposed to REM).

(4) Multi-line text overflow???

Single-line text overflow, the use of the title class is very much, and multi-line text class, in the details are used more.

1 //single-line text overflow ...2 . Inaline{3 Overflow:Hidden;4 White-space:nowrap;5 Text-overflow:ellipsis;6}7 //multi-line text overflow ...8 . Intwoline{9 Display:-webkit-box:!important;Ten Overflow:Hidden; One  A Text-overflow:ellipsis; - Word-break:Break-all; -  the -webkit-box-orient:Vertical; - -webkit-line-clamp:4; -}

4, Terminal Interactive optimization to click event Say no elastic scrolling pull-up refresh Tap Event Base Touch event drop-down load 300ms:

The Click event response on the mobile Web page is slower than 300ms
Use 300ms to determine whether to click or double

(1) Tap base event

How does 300ms delay break? The TAP event replaces the Click event. Custom Tao Event principle:
In Touchstart, Touchend, the recording time, finger position, in the touchend when the comparison, if the position of the finger is the same position (or allow to move a very small displacement value) and the time interval is short (generally considered to be 200ms), And the process has not triggered the touchmove, it can be thought to trigger the handheld device "click", generally referred to as "tap."

tap "tap" BUG: There are two layers, click on the first layer, if the click of the area in the second level of the range, then the second layer will be triggered. (reason is related to 300ms)

Solution for TAP transmission:
① using cache animations to transition 300ms latency
② the middle layer DOM element, let the middle layer receive this "penetrate" event, Hidden later
③ "Up and Down" uses the Tap event to solve the tap-penetrating event in principle (but inevitably the native tag's click event, such as A,input).
③ switch to Fastclick's library (the latest zepto has fixed this bug)

(2) Touch Base Event

Touch is the core event of mobile device interaction and supports multi-touch.
Touchstart: Finger touch screen trigger (already has a finger on the screen does not start)
Touchmove: Swipe the finger on the screen to trigger continuously
Touchend: Triggers when the finger leaves the screen
Touchcancel: Trigger when the system cancels touch (infrequently used) eg: a phone call or other system event when sliding the page

In addition to the common event properties, touch events contain proprietary touch properties:
Touches: An array of touch objects that track touches
Targettouches: An array of touch objects for a specific event target
Changetouches: An array of touch objects that last touched the change

a small bug: Android will only trigger once touchstart, once touchmove,touchend does not trigger. (4.0,4.1, 4.2 fix No, 4.4 start to appear again)

Solution: Add in Touchmove: Event.preventdefault (), can be fixedbug.

However note: Event.preventdefault () will cause the default behavior to not occur, such as scroll, which causes the page not to scroll! If the page has scroll bars, you need to consider replacing the solution. (3) Elastic scrolling, drop-down refresh

① Elastic Scrolling: When the client's page scrolls to the top or bottom, the scroll bar shrinks and lets us slide a certain distance. By buffering the effect of rebound, bring the user a good experience.
Mobile Web pages also have the ability to do so, but there are several things to consider in rolling:
Body Layer Scrolling: (System special Processing)
Comes with elastic scrolling, overflow:hidden invalidation, GIF and timer paused.
Partial scrolling: No elastic scrolling, no rolling inertia, not smooth.
Partial scrolling turns on elastic scrolling:

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

But note: Android does not support native elastic scrolling! But you can use the three-party library Iscroll to achieve

② drop-down refresh: The top drop down a small distance, the page elastic scrolling downward.
④ loading: Using the Scroll event instead of the touch event (Android has Bugs)

(4) Canvas & GPU Render "GPU rendering"

optimization tip: canvas instead of img tag
DrawImage (image,x,y); drawing pictures on canvas
DrawImage (image,x,y,width,height); draw zoom picture on canvas

Reason: img uses browser rendering, when the picture is particularly large and the phone performance is not very good, it will be special card, usually shown in sliding pictures. Because there is no GPU (graphics processor) rendering that triggers the physical device itself

Image object:

① Pre-load Picture: When set img.src= "", it means the request to load the picture
Proportional scaling of ② pictures

(5) CSS3 animation

When a CSS3 animation is over, we can listen to the relevant event animationend, for example, WebKit, is webkitanimationend.

5. Cross-terminal web

① single domain-Media Query
② Single domain – Multi-template
③ multi-domain – jump (very primitive)
④ Multi-platform APP

(1) Mobile first:

① more users and traffic on the mobile side
② all kinds of screens let us focus on business skills
③ mobile device with more advanced human-computer interaction experience

(2) Multi-terminal detection (3) Interface: Structure: Universal interface,

Interface model: Front end consumer, backend producer, test supervisor

6. Fragmented details

1) CSS3 animations, instead of Dom animation, are more efficient because CSS3 renders directly using the browser's GPU (graphics processor)

2) When you set its percent width to an element, he needs a comparison, that is, the parent element, but when it does not have the parent, it needs to give him an absolute position absolute value, but in mobile development, the whole block of pages to use Position:absolute; very memory-intensive , especially when the content is much more obvious. There are several consequences: under iOS, the browser will crash directly, and under Android, it will cause very, very good cards. So it is suggested to use JS directly.

3) display the picture in a row, do not use floating, use-webkit-transform:translate3d (0,0,0); Position:absolute;

4) New Date () * 1;//* 1, numeric operation, conversion to a digital form of timestamp

5)

// recording the beginning of the displacement, touches contains the set of points that all fingers touch on the screen-webkit-backface-visibility:hidden; /* */

6) More picture optimization, retain 3 nodes to use, current, previous, next picture node, remaining unwanted deletions

7) JQuery Mobile (JQM jqmobile)
is the version of jquery on mobile phones and tablets, and is the framework for creating mobile web apps.

8) 2048 bugs encountered during production: (see 9 (2) Touch base event bug)

// finger recognition is useless on phone, chrome19827 error: TouchEvent not triggered. Prevent incorrect use of the Preventdefault ()function(event) {    event.preventdefault ();});

10) Use Dropbox to publish your web App
Free
limitation: ① static website ② slower (abroad) ③ domain name is not suitable for memory
Web App, native app, and hybrid app (mixed mode)

Day 134th: Some summary of mobile Web development (II.)