欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

移动web开发小记（布局视口）（视觉视口）（理想视口）

程序员文章站 2024-01-24 17:29:40
...

一、视口

布局视口

视觉视口

理想视口

1.1为什么要使用视口

移动开发兴起后，出现的概念

也就是说，如果我们开发的页面只需要适应PC端，则不用考虑视口的概念

看下面的代码，并没有对视口进行配置

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
   .box{
     width: 300px;
   }
  </style>
</head>

<body>
<img class="box" src="./3.jpg" alt="">
</body>

</html>

在PC端的表现和在手机端的表现分别如下
移动web开发小记（布局视口）（视觉视口）（理想视口）原因在于，我们在手机端浏览中渲染此页面时，手机设置了视口为980，而我们手机屏幕的宽度为 375，默认情况下PC上的内容是无法在手机端显示完整的，会出现横向滚动条

手机上的浏览器一般不会允许出现这个横向滚动条，所以都会对内容进行缩放，也就是原来需要在980px 上显示的内容，缩放到375px 上就能够展示，你们页面中的所有元素就都要进行等比例的缩放

所以，在我们看来，图片变小了

1.2设置视口宽度

设置固定宽度
<meta name="viewport" content="width=375">
使用设备像素
<meta name="viewport" content="width=device-width">
设置缩放比
 <meta name="viewport" content="initial-scale=1">
用户缩放
<meta name="viewport" content="initial-scale=1,minimum-scale=1, maximum-scale=1">
完整写法
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimum-scale=1, maximum-scale=1">

布局视口

在PC端上，布局视口等于浏览器窗口的宽度。而在移动端上，由于要使为PC端浏览器设计的网站能够完全显示在移动端的小屏幕里，此时的布局视口会远大于移动设备的屏幕，就会出现滚动条。js获取布局视口：document.documentElement.clientWidth | document.body.clientWidth；

视觉视口

用户正在看到的网页的区域。用户可以通过缩放来查看网站的内容。如果用户缩小网站，我们看到的网站区域将变大，此时视觉视口也变大了，同理，用户放大网站，我们能看到的网站区域将缩小，此时视觉视口也变小了。不管用户如何缩放，都不会影响到布局视口的宽度。js获取视觉视口：window.innerWidth；

理想视口

布局视口的一个理想尺寸，只有当布局视口的尺寸等于设备屏幕的尺寸时，才是理想视口。js获取理想视口：window.screen.width；

上一篇： [数据结构]栈与栈的应用

下一篇： 二手车EDA

推荐阅读