Why use viewPort for adaptation?

The purpose is to adjust the width of all device layout viewports to the width of the design drawing

Start with the perfect ViewPort adaptation code

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Document</title> <style> * { margin: 0; padding: 0; } .box { width: 320px; height: 320px; background-color: #f60; } </style> </head> <body> <div class="box">test</div> <script> (function() {// targetWidth design physics pixel // Document. The documentElement. ClientWidth ideal viewport screen width / / scale due to the document. The documentElement. ClientWidth than targetWidth physical pixels, Is an enlargement let targetWidth = 640 let scale = document. The documentElement. ClientWidth/targetWidth let meta = document.querySelector("meta[name='viewport']") meta.content = "initial-scale="+ scale +", minimum-scale="+ scale +", maximum-scale="+ scale +", user-scalable=no" })() </script> </body> </html>Copy the code

The results are as follows:

Apple 6

Apple 6 plus

The effect on both devices accounted for 50%

Principle of ViewPort adaptation

In viewport adaptation, each element occupies the same number of CSS pixels on different devices, but the ratio of CSS pixels to physical pixels is not the same, they are all equal.

Advantages and disadvantages of Viewport adaptation

  • Advantage: What you measure is what you get

  • Cons: Not using a perfect viewport