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)系。