整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          CSS 可視窗口

          CSS 可視窗口
          lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" id="viewport" />

          width=device-width 設(shè)置布局視口的寬度, device-width設(shè)備出廠的視口寬度

          user-scalable=no 是否允許用戶縮放, 值為no或yes, no代表不允許, yes代表允許

          initial-scale=1.0 設(shè)置頁(yè)面的初始縮放視口寬度為1.0倍

          maximum-scale=1.0 允許用戶最大的縮放視口寬度為1.0倍

          minimum-scale=1.0 允許用戶最小的縮放視口寬度為1.0倍

          獲取可是窗口的寬度和高度?

          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="UTF-8">
          <title></title>
          
          <!--視口-->
          
          <!--
          視口寬度:設(shè)備寬度
          是否允許用戶縮放:no
          初始縮放比:1
          最大縮放比:1
          最小縮放比:1
          
          -->
          <meta name="viewport" content="width=device-width,user-scalable=no," />
          </head>
          <body>
          <!--
          視口
          可視窗口
          -->
          <h1>小許的手機(jī)真奇葩竟然不是980</h1>
          <p>你們感覺(jué)還好那我呢 </p>
          <script type="text/javascript">
              var w=document.documentElement.clientWidth || document.body.clientWidth;
          
              alert(w)
          </script>
          </body>
          </html>

          獲取屏幕的像素比和分辨率

          <!DOCTYPE html>
          <html lang="zh">
          <head>
          <meta charset="UTF-8" />
          <title>Document</title>
          <meta name="viewport" content="width=device-width"/>
          </head>
          <body>
          <script type="text/javascript">
              //設(shè)備像素比=分辨率/設(shè)備真實(shí)的大小
              var w=document.documentElement.clientWidth || document.body.clientWidth;
              var dpr=window.devicePixelRatio; //屏幕的像素比
          
              alert(w*dpr) //計(jì)算出屏幕的分辨率
          
              //console.log(window.devicePixelRatio);//設(shè)備像素比
          </script>
          </body>
          </html>

          devicePixelRatio屬性

          該 Window 屬性 devicePixelRatio 能夠返回當(dāng)前顯示設(shè)備的物理像素分辨率與 CSS 像素分辨率的比率

          還原屏幕的分辨率

          口單位(Viewport units)

          什么是視口?

          在PC端,視口指的是在PC端,指的是瀏覽器的可視區(qū)域;

          而在移動(dòng)端,它涉及3個(gè)視口:Layout Viewport(布局視口),Visual Viewport(視覺(jué)視口),Ideal Viewport(理想視口)。

          視口單位中的“視口”,PC端指的是瀏覽器的可視區(qū)域;移動(dòng)端指的就是Viewport中的Layout Viewport。

          根據(jù)CSS3規(guī)范,視口單位主要包括以下4個(gè):

          1.vw:1vw等于視口寬度的1%。

          2.vh:1vh等于視口高度的1%。

          3.vmin:選取vw和vh中最小的那個(gè)。

          4.vmax:選取vw和vh中最大的那個(gè)。

          vh and vw:相對(duì)于視口的高度和寬度,而不是父元素的(CSS百分比是相對(duì)于包含它的最近的父元素的高度和寬度)。1vh 等于1/100的視口高度,1vw 等于1/100的視口寬度。

          比如:瀏覽器高度950px,寬度為1920px, 1 vh=950px/100=9.5 px,1vw=1920px/100=19.2 px。

          vmax相對(duì)于視口的寬度或高度中較大的那個(gè)。其中最大的那個(gè)被均分為100單位的vmax。

          vmin相對(duì)于視口的寬度或高度中較小的那個(gè)。其中最小的那個(gè)被均分為100單位的vmin。


          vh/vw與%區(qū)別


          請(qǐng)看下面簡(jiǎn)單的栗子:

          <!DOCTYPE html>
          <html lang="en">
          
          <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <meta http-equiv="X-UA-Compatible" content="ie=edge">
              <title>VW&VH</title>
          </head>
          <style>
              * {
                  padding: 0;
                  margin: 0
              }
          
              .left {
                  float: left;
                  width: 50vw;
                  height: 20vh;
                  background-color: blue;
                  text-align: center;
                  line-height: 20vh;
                  font-size: 3rem
              }
          
              .right {
                  float: right;
                  width: 50vw;
                  height: 20vh;
                  background-color: green;
                  text-align: center;
                  line-height: 20vh;
                  font-size: 3rem
              }
          </style>
          
          <body>
              <div class="left">left</div>
              <div class="right">right</div>
          </body>
          
          </html>


          兼容性問(wèn)題(在移動(dòng)端 iOS 8 以上以及 Android 4.4 以上獲得支持,并且在微信 x5 內(nèi)核中也得到完美的全面支持)

          端web頁(yè)面中,js可以很方便的獲取div元素的高度和寬度,那么這篇文章就說(shuō)一說(shuō)原生JS與JQ如何快速的獲取DIV元素的高度和寬度的方法。

          js獲取div元素高度與寬度的方法

          js獲取div元素的高度與寬度要用的 clientHeight 與 clientWidth方法

          clientHeight:返回元素的可視高度

          clientWidth:返回元素的可視寬度

          示例代碼:

          <div id="mochu" style="height: 200px;width:150px;color:#fff;background-color: blueviolet;">
           飛鳥(niǎo)慕魚(yú)博客
          </div>
          <script>
           //獲取高度
           var h=document.getElementById('mochu').clientHeight;
           //獲取寬度
           var w=document.getElementById('mochu').clientWidth;
           console.log(h);
           console.log(w);
          </script>
          

          打印結(jié)果:

          200

          150


          主站蜘蛛池模板: 无码人妻精品一区二区三区66| 一区二区三区久久精品| 免费播放一区二区三区| 午夜爽爽性刺激一区二区视频| 三上悠亚一区二区观看| 无码人妻一区二区三区精品视频 | 国产精品自拍一区| 亚洲AV无码国产一区二区三区 | 亚洲一区二区成人| 午夜爽爽性刺激一区二区视频| 国产精品美女一区二区视频| 国产精品日韩一区二区三区| 天堂va在线高清一区| 国产suv精品一区二区33| 九九久久99综合一区二区| 美女免费视频一区二区三区| 无码人妻久久一区二区三区免费丨| 久夜色精品国产一区二区三区| 国产精品一区二区毛卡片| 亚洲视频一区在线观看| 熟女少妇精品一区二区| 国产一区二区三区露脸| 精品国产一区二区三区在线观看| 精品性影院一区二区三区内射| 中文字幕国产一区| 无码毛片一区二区三区视频免费播放| 久久精品视频一区| 国产日韩AV免费无码一区二区 | 久久国产精品一区| 亚洲综合无码一区二区三区| 亚洲AV噜噜一区二区三区| 精品久久久久久中文字幕一区| 亚洲福利视频一区| 国产在线不卡一区二区三区| 中文字幕av日韩精品一区二区 | 一区二区三区无码高清视频| 国产成人欧美一区二区三区| 91精品一区国产高清在线| www一区二区三区| 一区二区三区四区在线播放| 国产成人一区二区三区免费视频 |