Common adaptation solutions for mobile terminals

I have been working on mobile pages for some time, and I would like to summarize several mobile adaptation solutions that are commonly used in my work.

Base

There are already a lot of basic knowledge summaries on the Internet, and the concept that is easily confused is the viewport.

meta   In the label   viewport   Attributes, that is   view   Meaning

The viewport is divided into

• Layout Viewports
• Visual Viewport
• Ideal Viewport

Layout Viewports

That is   <meta name="viewport" content="width=device-width">   middle   width   The meaning of the attributes

All the styles we write in CSS are relative to   Layout Viewports   Layout

By default, the layout viewport of the mobile terminal is not the screen width, but is generally between 768px and 1024px (980px in most cases)

Can be   document.documentElement.clientWidth   Get (according to   width   and   initial-scale   to confirm)

Visual Viewport

The visual viewport refers to the area that the user sees through the device screen, which is equal to the current browser window size by default (when   initial-scale   1)

When the user zooms in or out on the browser, the size of the layout viewport does not change, so the page layout remains unchanged, but   Zooming changes the size of the viewport

Can be   window.innerWidth   Get (will change with zoom)

Zoom in on the page.   window.innerWidth   On the contrary, it decreases (the page is enlarged, and you see less)

Ideal Viewport

The ideal viewport is the ideal size of a website on a mobile device. This size is the screen size of the device.

That is   <meta name="viewport" content="width=device-width">   middle   device-width   Meaning

Can be   screen.width   Get (constant, does not change)

initial-scale

 < meta name = "viewport" content = "width=device-width, initial-scale=0.5" >

According to the formula   initial-scale = ideal viewport width / visual viewport width

Assuming the ideal viewport width is   414px   (device-width), set   initial-scale   is 0.5, then the visual viewport width is   414 / 0.5 = 818

If you get   document.documentElement.clientWidth   (Layout Viewport) value, you will find that it is not   414px   Rather   818px

Conclusion: The layout viewport width is the maximum value of width and visual viewport width.

Questions for consideration:

 < meta name = "viewport" content = "width=600, initial-scale=2" >

Assuming the ideal viewport width is   414px   (device-width), at this time   document.documentElement.clientWidth   What is the value of (Layout Viewport)?

Summarize

• document.documentElement.clientWidth   : Layout viewport, usually written in CSS   width=device-width
• window.innerWidth   : Visual viewport, page zoom will change this value in real time
• screen.width   : Ideal viewport, page screen size (device independent pixels), which is also in CSS   device-width

Common adaptation solutions

To sum it up in one sentence: Mobile adaptation is in progress   Screen width   of   Scaling   :

Usually when we develop, the mobile design draft we get is usually   750 * 1334   Size (iPhone 6 device pixels are used as the standard design).   750px   The element width measured on the design draft is   100px   , then in   375px   On a screen with a width of   50px   .

So the difficulty of adaptation is: how to achieve proportional scaling of the page?

Rem Solution

The core of this solution is: all elements that require dynamic layout no longer use   px   Fixed size, but using   rem   Relative size

rem   The size is relative to the root element   html   Font size: If   html   of   font-size   is 100px, then   1rem   is equal to 100px

Now let's assume that:

750px   Under the screen   html   of   font-size   is 100px, that is   1rem   is 100px, then   200px   Width   .box   element, it should be written as   2rem

So now:

375px   Under the screen, we need   .box   Elements are rendered as   100px

because   .box   The width is still   2rem   Therefore, at this time we need   1rem   is 50px, that is, at this time   html   of   font-size   50px

So at this point, we can derive a formula:

(750) / (100) = (current screen size) / (current screen 1rem)

A mathematical transformation of this formula yields:

(Current screen 1rem) = 100 * (Current screen size) / 750

Translated into js language is

Optimize the code

Considering the font rendering problem on Android and the monitoring of page size changes, the final code is as follows:

Note that: we take   100px   1rem is used as the design draft because it is convenient for calculation. For example,   250px   , we can easily calculate   2.5rem   .

Of course, we can also   50px   As 1rem of the design draft,   250px   , it should be written as   5rem   .

In fact, we can also use postcss-pxtorem or   SCSS   Function to help us automatically convert units

Through the Rem scheme, elements that need to be dynamically scaled, we use   rem   Relative units, elements that do not need to be scaled, we can still use   px   Fixed unit.

However, on large-screen devices (such as iPad or PC), since our page is scaled proportionally, the elements on the page will be enlarged a lot (the screen width is large, resulting in the root element font 1rem also becoming larger). But on large screens, what we really want is for users to see more content. At this time, we can use media queries to limit the font of the root element to prevent the problem of elements being too large on large screens.

Or modify the logic of the js script

VW Solution

vw is a relative unit, 1vw means 1% of the screen width

In fact, our   REM Program   that is   VW Solution   Simulation, we previously had a formula:

(750) / (100) = (current screen size) / (current screen 1rem)

Change the conversion method:

(Current screen 1rem) = (Current screen size) / 7.5

The vw unit is actually:

(Current screen 1vw) = (Current screen size) / 100

therefore,   REM Program   The screen width is divided into 7.5 parts using JS, and the new CSS3   vw   Unit, natively divides the screen width into 100 parts

So, in   VW Solution   We no longer need to use JS scripts!

750px   In the design draft,   1vw   equal   7.5px   (750 / 100), therefore, in the design draft, measure   200px   The width of   26.667vw   (200 / 7.5)

However, use   vw   Conversion is not like   rem   So convenient, at this time we can use   postcss-px-to-viewport   or   SCSS   Function to help us automatically convert units

Similarly, on large-screen devices, due to the large screen width, the elements of the page will also be enlarged a lot (the screen width is large, and 1vw is also large).   vw   is relative to the screen width, so we can't   REM Program   Same as in, manual control   html   The root font size, which is also used   VW Solution   A disadvantage of .

REM + VW Program

REM Program   The advantage is that it can be manually controlled   rem   size to prevent the page elements from scaling up when the screen is too large, but the disadvantage is that you need to use   JS   .   VW Solution   On the contrary, there is no need to use   JS   But it cannot be controlled manually   vw   size.

We can actually combine the two:

For layout elements, we still use   rem   But for the font size of the root element, we don't need to use JS to dynamically calculate it.

This js can be implemented directly using css

For large screen devices, we use media queries

More detailed   vw+rem layout solution   Can see   《Responsive typography and layout based on vw and other viewport units combined with rem》

Viewport scaling solution

There is also a simpler and more brutal method, which is to set   initial-scale

Our layout is completely based on the design draft   750px   , layout element units also use   px   Fixed unit (layout viewport is hard-coded to 750px)

for   375px   width, we will scale the entire page   0.5   :

<meta name="viewport" content="width=750, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=0">

Disadvantages of this solution: The entire page is scaled, and there is no control over the elements that you don't want to scale.

Some marketing H5 pages on the market are built through background visual drag and drop. In order to adapt to screens of various sizes, this solution is the lowest cost implementation (Yiqixiu uses this solution)

Actual Combat

Let’s take the membership purchase of online B station as an example

• rem scheme
• vw solution
• rem+vw solution
• Viewport solution

Please use the Chrome developer tools to simulate a mobile device to view

You can directly right-click the source code to view it. The code has not been compressed, and you can intuitively see the CSS adaptation writing methods of various solutions.