H5 layered screen adaptation

Hai. Li /2018/03/14/…

Design greatly, this is really “according to the design draft”, because now, any machine is the design draft standard machine! Development students, this time you can directly read the design notes!

Screen adaptation

Screen adaptation shall refer to the adaptation relationship between content adaptation area and screen area. A single screen can contain, cover or fill. Contain and cover also need to be located to handle white space and extra content. In the same H5, different content is often adapted in different ways, that is, layered.

Optimizing CSS

After the page is loaded, JS usually needs to delay at least 70ms to obtain the correct webView width and height
CSS is often executed first, and csSOM parsing is often built in parallel with DOM at the beginning
Js waits for dom and CSSOM to finish processing before executing, whereas CSS waits only for DOM
CSS does not need to switch, whereas JS has to switch the process twice to redraw when switching between vertical and horizontal screens

For performance issues such as screen adaptation, CSS should be implemented if CSS can be implemented.

The whole layer of adaptation

To ensure that the elements of each layer are scaled synchronously, the fit area of each layer should be equal to the size of the design draft. The immediate implementation is to construct a container of the same size as the adaptation area, the whole layer of adaptation. A container can have several elements of the same fit. Take the SVG implementation as an example:


      
<html>
<body>
<style>
.layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
<! -- fill -->
<svg class="layer" viewBox="0 0 1080 1920" preserveAspectRatio="none"> <! -- -- -- > container
  <rect x="0" y="0" width="1080" height="1920" fill="Rgba (96,96,96, 08)"/>  <! - element -- -- >
</svg>
<! Contain -->
<svg class="layer" viewBox="0 0 1080 1920" preserveAspectRatio="xMidYMid meet"> <! -- -- -- > container
  <rect x="0" y="233" width="1080" height="1407" fill="#1565C0"/>  <! - element -- -- >
</svg>
<! Contain -->
<svg class="layer" viewBox="0 0 1080 1920" preserveAspectRatio="xMidYMax meet"> <! -- -- -- > container
  <rect x="444" y="1779" width="191" height="39" fill="#1565C0"/>  <! - element -- -- >
</svg>
</body>
</html>
Copy the code

Actual effect:

The whole layer adaptation is simple, and the design value can be read directly during development, which can meet most static page requirements. But in the H5 animation, you have to consider the animation smooth, page performance.

Applying CSS animations to container elements can cause frequent rearrangements and redraws, resulting in stuttering.
It takes up too much memory to promote a container of the same size as the fit to the composition layer, doubling as many layers as possible.

To improve the performance of these implementations, animate the container and reduce the size of the container, preferably equal to the minimum total area of all elements in a layer

Streamline adaptation

The formula

See DERIVATION of H5 Layered screen adaptation formula

Design draft Width V height G Before adaptation x-coordinate Y width W height H After adaptation x-coordinate x3 = x* U/V y-coordinate Y3 = Y * F/G After adaptation X-coordinate X4 = M * U + (X-M * V)/ W *w1 = M * V/W *w3 + (x - m * v)/w * w1 ordinate y4 = n * f + (y - n * g)/h * h1 = n * g/h * h3 + (y - n * g)/h * h1 wide w3 = (w/v) * u high h3 = (h/g) * f when contain S = math.min (f/g, U /v) Total horizontal left white space O = (m* V-x)/w Total vertical white space P = (n* g-y)/h Scaling value s = math.max (f/g, O = (X-M * V)/w P = (Y-N *g)/h M = 0, m = 0.5, m = 1, n = 0, n = 0, n = 0 .5 When n = 1 is in the right level, the optimization of full-layer adaptive memory (W3 *h3)/(v1*g1) >= W *h/(v*g)Copy the code

Implementation examples

When Max – widthw/v, Max – heighth/gWhen the correspondingcontainAdapter.
When set min – widthw/v, min – height is zeroh/gWhen the correspondingcoverAdapter.
When set widthw/v, the height ofh/gsaidfillAdapter.
containIf the original size of the image is less thanmax-width 和 max-heightWhen usingzoom: 10Enlarge or directly modify the original size of the image.
coverIf the original size of the image is greater thanmin-width 和 min-heightWhen usingzoom: .1Reduce or directly modify the original size of the image.
Due to thetop leftMedian percentage is relative screen widthuAnd the highf, the correspondingm*u 和 n*f
Due to thetransformThe percentage is relative to the width of the adapted elementw1And the highh1, the corresponding(m* V + x)/w*w1 and (n*f + y)/h*h1


      
<html>
<body>
<style>
img {
  /* Min-width and min-height form the virtual container */
  min-width: 50.37037037037037%; /* w3 = (w/v)*u where w = 544, v = 1080 */
  min-height: 7.395833333333333%; /* h3 = (h/g)*f where h = 142, g = 1920 */
  zoom:.1;
  /* x4 = m*u + (x - m*v)/w*w1 */
  /* y4 = n*f + (y - n*g)/h*h1 */
  position: absolute;
  left: 50%; /* m*u where m =.5*/
  top: 50%; /* n*f where n =.5 */
  transform:
    translateX(48.34558823529412%)/* (x-m *v)/w*w1 where x = 277, m =.5, v = 1080, w = 544 */
    translateY(378.8732394366197%)./* (y-n *g)/h*h1 Y = 1498, n =.5, g = 1920, h = 142 */
}
</style>
<img src="http://ui.qzone.com/544x142"/> <! - element -- -- >
</body>
</html>
Copy the code

Background implementation example

background-sizeA value ofcontainWhen the correspondingcontainAdapter.
background-sizeA value ofcoverWhen the correspondingcoverAdapter.
background-sizeA value of100% 100%When the corresponding `fillAdapter.
background-positionPercentages ando pThe same meaning


      
<html>
<body>
<style>
div {
  position: absolute;
  width: 50.37037037037037%; /* w3 = w/v*u where w = 544, v = 1080 */
  height: 7.395833333333333%; /* h3 = h/g*f where h = 142, g = 1920 */
  background: url(http://ui.qzone.com/544x142) no-repeat; /* Background image for element */
  background-size: cover;
  left: 25.64814814814815%; /* x3 = x/v*u where x = 277, v = 1080 */
  top: 78.02083333333333%; /* y3 = y/g*f where y = 1498 and g = 1920 */
  background-position-x: -48.34558823529412%; /* o = (x - m*v)/w where m =.5, v = 1080, x = 277, w = 544*/
  background-position-y: 378.8732394366197%; /* p = (y-n *g)/h where n =.5, g = 1920, y = 1498, h = 142*/
}
</style>
<div></div> <! -- -- -- > container
</body>
</html>
Copy the code

Implementation examples

preserveAspectRatio 的 meetOrSlice 为 meetWhen the correspondingcontainAdapter.
preserveAspectRatio 的 meetOrSlice 为 sliceWhen the correspondingcoverAdapter.
preserveAspectRatioA value ofnoneWhen the correspondingfillAdapter.
herepreserveAspectRatio 的 meetOrSliceThe opposite is the container, noAdapter areaHere withtransformTo locate, andpreserveAspectRatio 的 meetOrSliceFixed forxMinYMin.


      
<html>
<body>
<style>
svg {
  position: absolute;
  width: 50.37037037037037%;
  height: 7.395833333333333%;
  /* x4 = m*v/w*w3 + (x - m*v)/w*w1 */
  /* y4 = n*g/h*h3 + (y - n*g)/h*h1 */
  top: 0;
  left: 0;
  transform:
    translateX(99.26470588235294%)./* m*v/w*w3 where m =.5, v = 1080, w = 544 */
    translateY(676.056338028169%)./* n*g/h*h3 Where n =.5, g = 1920, h = 142 */
    overflow: visible;
}
svg image {
  transform:
    translateX(48.34558823529412%)/* (x-m *v)/w*w1 where x = 277, m =.5, v = 1080, w = 544 */
    translateY(378.8732394366197%)./* (y-n *g)/h*h1 Y = 1498, n =.5, g = 1920, h = 142 */
}
</style>
<svg viewBox="0 0 544 142" preserveAspectRatio="xMinYMin meet"> <! -- -- -- > container
  <image width="544" height="142" xlink:href="http://ui.qzone.com/544x142"/> <! - element -- -- >
</svg>
</body>
</html>
Copy the code

Auxiliary tool

Calculating percentages and writing CSS by hand is a hassle. You can use tools like SASS to simplify things. Design width V height G is generally a page-level constant. Just read the x, Y, width W, and height H of each element in the design, and the tool generates the CSS. This mother no longer need to worry about my restore problems, screen adaptation problems.

Word processing

Fixed or unfixed lines of text,svg 的 textLabels can be handled
Text is fixed or single line is not fixed and text can be turned into pictures
Text lines are not fixed, you can usesvg 的 foreignObjectEmbedded in ordinarydiv

Scheme comparison

There are many screen adaptation schemes. Which one to choose is full-layer adaptation or thin adaptation? The following is a comparison

plan	The zoom	positioning	Text zoom	Compatible with
Padding – top percentage	Only in accordance with the wide	✓	✗	✓
viewport	✓	✗	✓	Complex support
object-fit	✓	✓	✗	Mobile Android 4.4.4+
svg preserveRatio	✓	✓	✓	Mobile Android 3.0+
(max/min)-(width/height)	✓	✓	Fixed text	✓
background-size	✓	✓	Text to picture	✓

Screen adaptation

Optimizing CSS

The whole layer of adaptation

Streamline adaptation

The formula

Implementation examples

Background implementation example

Implementation examples

Auxiliary tool

Word processing

Scheme comparison

Related Posts

Front end questions -BFC(block formatting context)

WebRTC: “Yooge” in the Enterprise

What are generator functions in ES6?