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

最新推荐文章于 2022-04-28 11:38:07 发布

月亮不说谎！

最新推荐文章于 2022-04-28 11:38:07 发布

阅读量396

点赞数 1

本文链接：https://blog.csdn.net/weixin_45600332/article/details/103673464

版权

一、视口

布局视口

视觉视口

理想视口

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端的表现和在手机端的表现分别如下
在这里插入图片描述原因在于，我们在手机端浏览中渲染此页面时，手机设置了视口为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；

月亮不说谎！

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动web开发小记（布局视口）（视觉视口）（理想视口）

一、视口布局视口视觉视口理想视口1.1为什么要使用视口移动开发兴起后，出现的概念也就是说，如果我们开发的页面只需要适应PC端，则不用考虑视口的概念看下面的代码，并没有对视口进行配置<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta h...
复制链接

扫一扫