整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
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。
請(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>端web頁(yè)面中，js可以很方便的獲取div元素的高度和寬度，那么這篇文章就說(shuō)一說(shuō)原生JS與JQ如何快速的獲取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
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
