Come out to mix, those who mix past, sooner or later will have to return (￣ ￣)┍.

Let’s address a few issues:

1. What is viewPort? What does it do?

Viewport used to be a bit of a shock, but it hit me when I was recently working on a mobile project and noticed the neglected meta tags. Well, first let us learn about meta tags which have been ignored. Then we look at the ViewPort. It is easy to remember.

So, what does it do? To understand what it does, we need to understand some of the basics.

Viewport type

Viewport refers to the browser window, the part of the browser used to display the web page, which is the visible area of the user’s web page.

The viewPort function is to control your site’s highest block container: the < HTML > element. Viewport is the element that holds the < HTML > element. The width of the < HTML > element is the width of the browser, which is 100% of the viewPort width. (the original)

Viewports are different on mobile and PC. The viewport on PC is the browser window area, while on mobile there are three different viewport concepts: layout viewport, visual viewport and ideal viewport.

  • Layout ViewPortThe base window for web page layout, equivalent to the size of the current browser window on PC browsers (excluding Borders, Margins, and scroll bars). On mobile, layout viewports are given a default value, mostly 980px, which ensures that PC web pages can be rendered on mobile browsers, but are so small that users can manually zoom in. Can be achieved bydocument.documentElement.clientWidth/clientHeightGets the layout viewport size of the web page in standard mode.
  • Visual ViewPort: The part of the screen that the user can see on a mobile device. Can be achieved bywindow.innerWidth / innerHeightTo get the visual viewport size.
  • Ideal Viewport: The ideal size for a website page to display on mobile. By keeping the page width consistent with the device width (layout viewport = ideal viewport = visual viewport), we can see a normal, comfortable page on a mobile screen. You can do this by callingscreen.width / heightTo get the ideal viewport size.

(👉 viewport mobile adaptation, what you need to know about mobile adaptation)

The viewport setting does not affect PC pages, but it is important for mobile pages.

Attribute is introduced

attribute meaning The values
width Defines the width of the viewport, in pixels Positive integer or device width device-width
height Defines the height of the viewport, in pixels Positive integer or device-height
initial-scale Define the initial scaling value An integer or decimal.
minimum-scale Defines the minimum scaling that must be less than or equal to the maximum-scale setting An integer or decimal.
maximum-scale Defines the maximum zoom scale, which must be greater than or equal to the minimum-scale setting An integer or decimal.
user-scalable Defines whether to allow the user to manually scale the page. The default value is yes yes/no

Basic usage and functions

<meta name="viewport" content="Width = device - width, initial - scale = 1.0, the maximum - scale = 1.0, user - scalable = no">
Copy the code

Here’s the basic setup:

  • width=device-widthSaid: letLayout viewportThe width of is equal to the width of the device;
  • initial-scale=1: Indicates that the initial zoom ratio of the page is 1, which is equivalent to lettingVisual viewportIs equal to theIdeal viewport;
  • Maximum - scale = 1.0Indicates that the maximum zoom ratio of the page is 1.
  • user-scalable=noIndicates that the user is not allowed to zoom in or out of the page.

🌟viewport is used to scale the viewport to match the screen width. Width =device.width Specifies the initial size of the viewport equal to the device width. And the default layout viewport initial size is equal to the width of the device, which is called the ideal viewport.

2. What is REM? How is it laid out?

Rem (font size of the root Element) : Refers to the unit of font size relative to the root element. The layout is essentially proportional scaling, generally based on width.

Transferring a design to the screen of a mobile phone is similar to drawing a map and scaling it down:

3. Why scale? How does scale relate to DPR?

Device Pixel Ratio (DPR) : the ratio of physical pixels to logical pixels (CSS pixels).

window.devicePixelRatio
Copy the code
  • Web front-end domain, pixel divided intoEquipment pixel 和 CSS pixel;
  • aCSS pixelThe size of the page is variable, such as when the user zooms in and out of the pageCSS pixelAnd theEquipment pixelBoth size and quantity are constant.

[Design draft] : The 750px wide design draft given by the designer is based on the unit of device pixel (physical pixel).

[Web page writing] : CSS pixels written by front-end engineers when coding Web pages need to be converted according to the pixel ratio of devices.

Device pixel ratio (DPR) = Device pixel ratio/ideal viewport CSS pixel ratio (device-width), then:

CSS pixel = Design pixel/DPR.

Scaling affects the viewport size of the layout. When we zoom in and out of the page on the mobile side, we are actually changing the size of the CSS pixels. The purpose of scaling is to make the CSS pixels fit the device pixels on the mobile side.

width=device-width,initial-scale=1/dpr

All you have to do is scale up the layout viewport by a factor of DPR, and then scale it to fit the device, so that the CSS pixels are one-to-one with the device’s physical pixels.

var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
if(isIPhone) {// On iOS, use 2x for screens 2 and 3, and 1x for the restif(devicePixelRatio >= 3 && (! dpr || dpr >= 3)) { dpr = 3; }else if(devicePixelRatio >= 2 && (! dpr || dpr >= 2)){ dpr = 2; }else{ dpr = 1; }}else{// For other devices, still use 1 times DPR = 1; } scale = 1 / dpr;Copy the code

💡 REM is to solve the problem of different models with different widths, and SCALE is to solve the problem of DPR. Mobile adaptive is independent of DPR.

DPR is adopted in Taobao scheme to solve the 1px problem, while netease scheme does not introduce DPR, the layout viewport does not enlarge, and the whole page does not zoom, but it does not affect the proportion with the design drawing.

➹ Really, mobile sizing adaptation has nothing to do with DPR

➹ Explain the related concepts of adaptation

With these questions in mind, we will have the essence of mobile adaptation, which can be used for practical development.

🙋 get the design draft, how should start?

From the REM conversion above, we can see how to convert the px of elements in the visual draft (750px) to REM.

(1) Set the HTML font size, such as dividing the mobile phone screen into 10 parts:

<script>
    var dpr = window.devicePixelRatio;
    var meta = document.createElement('meta');

    // dpr
    meta.setAttribute('content'.'initial-scale=' + 1 / dpr + ', maximum-scale=' + 1 / dpr + ', minimum-scale=' + 1 / dpr + ', user-scalable=no');
    document.getElementsByTagName('head')[0].appendChild(meta);

    // rem
    document.addEventListener('DOMContentLoaded'.function (e) {
        document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';
    }, false);
</script>
Copy the code

(2) Suppose the element width is 300px, then the element width is:

Automatic conversion can be achieved through the following schemes:

✔ Scss scheme

$ue-width: 750; /* The width of the ue graph */ @function px2rem($px) {@return #{$px/$ue-width*10}rem;
}

p {
  width: px2rem(100);
}
Copy the code

➤ ➤ Vscode – cSSREM

✔ postcss – pxtorem scheme

// postcss.config.js
const pxtorem = require('postcss-pxtorem'); Const pxtoremOpts = {rootValue: 16, // root font size, default 16 unitPrecision: 5, // precision propList: ['font'.'font-size'.'line-height'.'letter-spacing'], // Can convert px to rem selectorBlackList: [], // the selector ignores and keeps px replace:true// Replace the rule containing rems mediaQuery:false, // Whether to convert px minPixelValue in media query: 2 // Set the minimum pixel value to replace}; module.exports = { plugins: [ pxtorem(pxtoremOpts), ], };Copy the code

5. Common mobile resolution

Click on DEVICE METRICS to see more terminal DEVICE METRICS.

➹ reference

  • viewport
    • Viewports analysis
    • Responsive Web Design —Viewport| novice tutorial
    • Viewport Mobile adaptation
  • Adaptation related
    • Here’s what you need to know about mobile adaptation
    • Really, mobile sizing adaptation is independent of DPR
    • Use Flexible to implement terminal adaptation of MOBILE H5 page — by desert
    • Explain the concept of adaptation
    • How much do you know about mobile adaptation?
    • HTML5 mobile adaptive solutions and trampling pits
    • Mobile Web Development
    • An article that will Really Teach you how to develop mobile pages
  • rem
    • Rem layout principle analysis
    • Learn about real “REM” phone screen adaptation
    • Simple and crude mobile terminal adaptation scheme – REM
    • Lovely rem
    • Taobao.com, netease mobile terminal PX conversion REM principle, VUe-CLI to achieve PX conversion REM
  • Tools ➹ use PostCSS to solve mobile REM adaptation problems ➹ VsCode install CSSREM plug-in px to REM ➹ Easy to use PX to REM plug-in recommend ➹ PX and REM online conversion tools