web移动关于视口的代码操作

程序员文章站 2022-04-03 22:47:47

...

<!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');
  // 用来获取viewport
  function 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');
  // 用来获取viewport
  function 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');
  // 用来获取viewport
  function 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=1
    user-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>