web移动关于视口的代码操作
生活随笔
收集整理的這篇文章主要介紹了
web移动关于视口的代码操作
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>視口</title><style>body {padding: 0;margin: 0;background-color: #F7F7F7;}h3 {text-align: center;}p {text-indent: 32px;line-height: 20px;margin: 10px 0;}</style>
</head>
<body>
<div class="info"><span class="width"></span><span class="height"></span>
</div><div class="wrapper"><h3>木蘭辭</h3><p>唧唧復唧唧，木蘭當戶織。不聞機杼聲，惟聞女嘆息。(惟聞 通：唯)</p><p>問女何所思，問女何所憶。女亦無所思，女亦無所憶。昨夜見軍帖，可汗大點兵，軍書十二卷，卷卷有爺名。阿爺無大兒，木蘭無長兄，愿為市鞍馬，從此替爺征。</p><p>東市買駿馬，西市買鞍韉，南市買轡頭，北市買長鞭。旦辭爺娘去，暮宿黃河邊，不聞爺娘喚女聲，但聞黃河流水鳴濺濺。旦辭黃河去，暮至黑山頭，不聞爺娘喚女聲，但聞燕山胡騎鳴啾啾。</p><p>萬里赴戎機，關山度若飛。朔氣傳金柝，寒光照鐵衣。將軍百戰死，壯士十年歸。</p><p>歸來見天子，天子坐明堂。策勛十二轉，賞賜百千強。可汗問所欲，木蘭不用尚書郎，愿馳千里足，送兒還故鄉。(一作：愿借明駝千里足)</p><p>爺娘聞女來，出郭相扶將；阿姊聞妹來，當戶理紅妝；小弟聞姊來，磨刀霍霍向豬羊。開我東閣門，坐我西閣床，脫我戰時袍，著我舊時裳。當窗理云鬢，對鏡貼花黃。出門看火伴，火伴皆驚忙：同行十二年，不知木蘭是女郎。（貼 通：帖；驚忙 一作：惶）</p><p>雄兔腳撲朔，雌兔眼迷離；雙兔傍地走，安能辨我是雄雌？</p></div><!-- 一個類似jQuery的庫 --><script src="../js/zepto.js"></script><script>var clientWidth, clientHeight;var width = $('.width'),height = $('.height');// 用來獲取viewportfunction getSize() {clientWidth = document.documentElement.clientWidth;clientHeight = document.documentElement.clientHeight;width.text('PC設備Viewport的寬度為：' + clientWidth);height.text('PC設備Viewport的高度為：' + clientHeight);}// 調用getSize();// 監聽窗口變化window.onresize = function () {getSize();}</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><title>Title</title><style>body {background-color: #000;}img{width: 57px;}</style>
</head>
<body>
<img src="../images/big.png" alt="">
<img src="../images/small.png" alt="">
<script>alert(window.devicePixelRatio);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>視口</title><style>body {padding: 0;margin: 0;background-color: #F7F7F7;}</style>
</head>
<body>
<script>// 獲取到html元素的大小var clientWidth = document.documentElement.clientWidth;var clientHeight = document.documentElement.clientHeight;console.log('PC設備Viewport的寬度為：' + clientWidth);console.log('PC設備Viewport的高度為：' + clientHeight);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>視口</title><style>body {padding: 0;margin: 0;background-color: #F7F7F7;}.info {line-height: 20px;padding: 10px;background-color: pink;}.info span {display: block;}.viewport {/*1.如果確定具體的寬高 值，當超出viewport的大小的時候，會出現滾動條2.如果設置的寬度為100%,當子元素寬高大于父容器的時候，會自動換行3.如果不想出現滾動條或者換行，可以將子元素設置為父容器的百分比*/width: 100%;/*width: 1152px;*/height: 200px;background-color: #CCC;}.viewport .box {/*width: 288px;*/width: 25%;height: 200px;text-align: center;line-height: 200px;font-size: 28px;float: left;background-color: blue;border-right: 2px solid #ccc;box-sizing: border-box;}</style>
</head>
<body><!-- 顯示窗口信息 --><div class="info"><span class="width"></span><span class="height"></span></div><div class="viewport"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div></div><!-- 一個類似jQuery的庫 --><script src="../js/zepto.js"></script><script>var clientWidth, clientHeight;var width = $('.width'),height = $('.height');// 用來獲取viewportfunction getSize() {clientWidth = document.documentElement.clientWidth;clientHeight = document.documentElement.clientHeight;width.text('PC設備Viewport的寬度為：' + clientWidth);height.text('PC設備Viewport的高度為：' + clientHeight);}// 調用getSize();// 監聽窗口變化window.onresize = function () {getSize();}</script>
</body>
</html>
移動端視口-layout viewport
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>視口</title><style>body {padding: 0;margin: 0;background-color: #F7F7F7;}.box {height: 300px;text-align: center;background-color: pink;}</style> </head> <body> <script src="../js/zepto.js"></script> <!-- 顯示窗口信息 --> <div class="info"><span class="width"></span><span class="height"></span> </div><div class="box">layout viewport</div><script>var clientWidth, clientHeight;var width = $('.width'),height = $('.height');// 用來獲取viewportfunction getSize() {/*默認的視口大小*/clientWidth = document.documentElement.clientWidth;clientHeight = document.documentElement.clientHeight;width.text('PC設備Viewport的寬度為：' + clientWidth);height.text('PC設備Viewport的高度為：' + clientHeight);}// 調用getSize();var clientWidth = document.documentElement.clientWidth;var clientHeight = document.documentElement.clientHeight;console.log('layout viewport 的寬度為：' + clientWidth);console.log('layout viewport 的高度為：' + clientHeight);</script> </body> </html> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><!--對viewport的設置的meta建議寫在已有的meta標簽(<meta charset="UTF-8">)之后--><!--name="viewport":說明當前meta標簽是用來設置viewport的屬性的，這個屬性只有在移動端才會有效--><!--content="":進行viewport的設置width:設置viewport的寬度 device-width:獲取當前設備的寬度initial-scale=1:設置初始縮放比例 當我們設置width=device-width，也達到了initial-scale=1的效果，得知其實 initial-scale = ideal viewport / layout viewport 意味著，如果initial-scale設置為1，相當于設置了兩個viewport的寬度一致maximum-scale:設置最大的縮放比例minimum-scale:設置默認狀態下最小的縮放比例--><!--<meta name="viewport" content="width=device-width">--><!--<meta name="viewport" content="initial-scale=1user-scalable:設置是否允許用戶進行縮放yes/no">--><!--為了達到兼容：--><!--<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,user-scalable=no">--><!--meta:vp+tab--><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><title>Title</title><style>body{padding: 0;margin: 0;}div{width: 100%;height: 200px;background-color: pink;}</style> </head> <body> <div>經過分析我們得到，移動頁面最理想的狀態是，避免滾動條且不被默認縮放處理，我們可以通過設置來進行控制，并改變瀏覽器默認的layout viewport的寬度。經過分析我們得到，移動頁面最理想的狀態是，避免滾動條且不被默認縮放處理，我們可以通過設置經過分析我們得到，移動頁面最理想的狀態是，避免滾動條且不被默認縮放處理，我們可以通過設置來進行控制，并改變瀏覽器默認的layout viewport的寬度。經過分析我們得到，移動頁面最理想的狀態是，避免滾動條且不被默認縮放處理，我們可以通過設置經過分析我們得到，移動頁面最理想的狀態是，避免滾動條且不被默認縮放處理，我們可以通過設置來進行控制，并改變瀏覽器默認的layout viewport的寬度。經過分析我們得到，移動頁面最理想的狀態是，避免滾動條且不被默認縮放處理，我們可以通過設置經過分析我們得到，移動頁面最理想的狀態是，避免滾動條且不被默認縮放處理，我們可以通過設置來進行控制，并改變瀏覽器默認的layout viewport的寬度。經過分析我們得到，移動頁面最理想的狀態是，避免滾動條且不被默認縮放處理，我們可以通過設置經過分析我們得到，移動頁面最理想的狀態是，避免滾動條且不被默認縮放處理，我們可以通過設置來進行控制，并改變瀏覽器默認的layout viewport的寬度。經過分析我們得到，移動頁面最理想的狀態是，避免滾動條且不被默認縮放處理，我們可以通過設置經過分析我們得到，移動頁面最理想的狀態是，避免滾動條且不被默認縮放處理，我們可以通過設置來進行控制，并改變瀏覽器默認的layout viewport的寬度。經過分析我們得到，移動頁面最理想的狀態是，避免滾動條且不被默認縮放處理，我們可以通過設置</div> </body> </html>總結
以上是生活随笔為你收集整理的web移动关于视口的代码操作的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 从不被看好到逆袭成王 小鹏P7“神车”的
- 下一篇： 论文解读（GLA）《Label-inva