pc viewport

. 1 <! DOCTYPE HTML>
 2 <HTML lang = "EN">
 . 3 <head>
 . 4      <Meta charset = "UTF-. 8">
 . 5      <title> </ title>
 . 6 </ head>
 . 7 <body>
 . 8 <Script >
 9      @ 1 acquires physical pixel 
10      the let screenWidth = window.screen.width;
 . 11      the let screenHeight = window.screen.height;
 12 is      the console.log ( 'physical screen width' + screenWidth);
 13 is      the console.log ( ' the physical height of the screen '+ screenHeight);
 14  
15  
16      // 2.Obtaining an independent physical pixel ratio and the pixel 
17     alert(window.devicePixelRatio);
18 </script>
19 </body>
20 </html>

. 1 <! DOCTYPE HTML>
 2 <HTML lang = "EN">
 . 3 <head>
 . 4      <Meta charset = "UTF-. 8">
 . 5      <title> Viewport </ title>
 . 6      <style>
 . 7          body {
 . 8              padding: 0 ;
 . 9              margin: 0 ;
 10          }
 . 11  
12 is          / * 
13 is           1. If the child element to determine the specific value of width and height, the size of the viewport when exceeded, there will be a scroll bar
 14           2. if the width is set to 100% when taller than wide sub-elements when the parent container, will wrap
 15           3. If you do not want to change the percentage of the scroll bar or line, can be sub-element appears as a parent vessel
 16           * / 
17          .
viewport{
18             /*width: 1536px;*/
19             width: 100%;
20             height: 400px;
21             background-color: #ccc;
22         }
23 
24         .viewport .box{
25             box-sizing: border-box;
26            /* width: 400px;*/
27             width: 25%;
28             height: 200px;
29             line-height: 200px;
30             float: left;
31             background-color: red;
32             border-right: 2px solid #fff;
33         }
34     </style>
35 </head>
36 <body>
37    <div class="show">
38        <span class="width"></span>
39        <span class="height"></span>
40    </div>
41 
42    <div class="viewport">
43        <div class="box">内容1</div>
44        <div class="box">内容2</div>
45        <div class="box">内容3</div>
46        <div class="box">内容4</div>
47    </div>
48<Script the src = "JS / Zepto.js"> </ Script>
 49 <Script>
 50      the let = getSize () => {
 51 is          . $ ( '. width') text ( 'end of the PC viewport width:' + document.documentElement.clientWidth);
 52 is          $ ( 'height.') text ( 'end of the PC viewport height:'. + document.documentElement.clientHeight);
 53 is      };
 54 is  
55      getSize ()
 56 is </ Script>
 57 is < / body>
 58 </ HTML>

Concept pc side viewports

Guess you like