开发者社区> 派小星_> 正文

移动端适配——视口概念

2023-02-28 31

简介： 事实上这种方式是不利于我们进行移动的开发的，我们希望的是设置100px，那么显示的就是100px；

+关注继续查看

1 认识视口

在前面我们已经简单了解过视口的概念了：

- 在一个浏览器中，我们可以看到的区域就是视口（viewport）；
- 我们说过fixed就是相对于视口来进行定位的；
- 在PC端的页面中，我们是不需要对视口进行区分，因为我们的布局视口和视觉视口是同一个；

但是在移动端，不太一样，你布局的视口和你可见的视口是不太一样的。

- 这是因为移动端的网页窗口往往比较小，我们可能会希望一个大的网页在移动端可以完整的显示；
- 所以在默认情况下，移动端的布局视口是大于视觉视口的；

所以在移动端，我们可以将视口划分为三种情况：

- 布局视口（layout viewport）
- 视觉视口（visual layout）
- 理想视口（ideal layout）

2 布局视口和视觉视口

布局视口（layout viewport）

- 默认情况下，一个在PC端的网页在移动端会如何显示呢？

- - 第一，它会按照宽度为980px来布局一个页面的盒子和内容；
  - 第二，为了显示可以完整的显示在页面中，对整个页面进行缩小；

- 我们相对于980px布局的这个视口，称之为布局视口（layoutviewport）；

- - 布局视口的默认宽度是980px；

视觉视口（visual viewport）

- 如果默认情况下，我们按照980px显示内容，那么右侧有一部分区域就会无法显示，所以手机端浏览器会默认对页面进行缩放以显示到用户的可见区域中；
- 那么显示在可见区域的这个视口，就是视觉视口（visual viewport）

在Chrome上按shift+鼠标左键可以进行缩放。

3 理想视口

如果所有的网页都按照980px在移动端布局，那么最终页面都会被缩放显示。

- 事实上这种方式是不利于我们进行移动的开发的，我们希望的是设置100px，那么显示的就是100px；
- 如何做到这一点呢？通过设置理想视口（ideal viewport）；

理想视口（ideal viewport）：

- 默认情况下的layout viewport并不适合我们进行布局；
- 我们可以对layout viewport进行宽度和缩放的设置，以满足正常在一个移动端窗口的布局；
- 这个时候可以设置meta中的viewport；

- 我们常常像下面这样：

版权声明：本文内容由便宜云服务器实名注册用户自发贡献，版权归原作者所有，便宜云服务器开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《便宜云服务器开发者社区用户服务协议》和《便宜云服务器开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

Web App开发

开发者社区 > 开发与运维 > 文章

云迁移中心

作者高分内容

更多

JavaScript学习（一） 108

相关文章

萌狼蓝天

【前端】【响应式设计】【移动端】响应式设计作业01：视口、二倍图

【前端】【响应式设计】【移动端】响应式设计作业01：视口、二倍图

20 0

猪痞恶霸

基本的移动端适配

一个项目一般拥有移动端和pc端的产品图我们为了减少工作量会在开发pc端时同时使它适配移动端

40 0

卖坚果的怪叔叔

移动端常见布局方式

移动端常见布局方式

34 0

rp54yl2b5rw2w

PC端和移动端如何实现字体适配

PC端和移动端如何实现字体适配

380 0

国服第二切图仔

移动端页面开发适配 rem布局原理

移动端页面开发适配 rem布局原理

93 0

chokcoco

前端基础知识概述 -- 移动端开发的屏幕、图像、字体与布局的兼容适配（上）

前端基础知识概述 -- 移动端开发的屏幕、图像、字体与布局的兼容适配

125 0

chokcoco

前端基础知识概述 -- 移动端开发的屏幕、图像、字体与布局的兼容适配（下）

前端基础知识概述 -- 移动端开发的屏幕、图像、字体与布局的兼容适配（下）

157 0

ADI

[分享] 移动端布局多种实现方式

[分享] 移动端布局多种实现方式

84 0

韩曙亮

【Flutter】Android、Flutter 折叠屏适配 ( 展开大屏 | 折叠主屏 | 折叠副屏 | 静态展示 | 动态热切换适配 | 拉伸布局 | X 轴自适应适配 | 布局重构 )（二）

【Flutter】Android、Flutter 折叠屏适配 ( 展开大屏 | 折叠主屏 | 折叠副屏 | 静态展示 | 动态热切换适配 | 拉伸布局 | X 轴自适应适配 | 布局重构 )（二）

195 0

韩曙亮

【Flutter】Android、Flutter 折叠屏适配 ( 展开大屏 | 折叠主屏 | 折叠副屏 | 静态展示 | 动态热切换适配 | 拉伸布局 | X 轴自适应适配 | 布局重构 )（一）

【Flutter】Android、Flutter 折叠屏适配 ( 展开大屏 | 折叠主屏 | 折叠副屏 | 静态展示 | 动态热切换适配 | 拉伸布局 | X 轴自适应适配 | 布局重构 )（一）

267 0

+关注

派小星_

文章

问答

视频

作者高分内容

更多

JavaScript学习（一） 108

文章排行榜

最热

最新

1 C++ STL容器和算法：详解和实例演示 39483

2 Go 方法接收器：选择值接收器还是指针接收器？ 38113

3 干掉 “重复代码”，这三种方式绝了！ 36569

4 万能架构设计：ES+Redis+MySQL，这套组合可应对80%业务场景（2） 31300

5 使用篇丨链路追踪（Tracing）很简单：链路拓扑 30572

6 如何提高光伏发电效能异常检出效率的实践案例 28266

7 日志服务 SLS 和开源 ELK 全面对比 28030

8 数据一致性比对（番外） 27391

9 便宜云服务器蔡英华：Landing Zone助力生态伙伴成为企业云治理服务专家 25502

10 如何画好一张架构图？（3） 22796

11 高性能的本地缓存方案选型，看这篇就够了！ 21522

12 PolarDB-X 致数据库行内人 (一) ~ 如何有效评测国产数据库的分布式事务 15294

13 实践教程之体验PolarDB-X分布式事务和数据分区 10337

14 Python3，自从掌握了这个方法，再也不用print进行调试了。 14595

15 现场直击：2023便宜云服务器峰会精彩发布抢先看（内含福利） 334999

16 如何解决IoT数据入仓的客户实践 8619

17 大数据&AI产品月刊【2023年4月】 5400

18 ClickHouse创始人：融合数据库该“卷”的还是性能和速度 55349

19 便宜云服务器联合埃森哲正式发布《跨国企业上云登陆区（Landing Zone）白皮书》 50755

20 除了价格降70%，关于对象存储预留空间你还需要了解这些 32337

1 AIGC创作家 141

2 亿视电子基于PolarDB-X打造能源数字基座实践 57

3 全面升级，重磅上线！容器服务ASK评测携大奖前来！ 52

4 便宜云服务器AI新品“通义听悟”，开放公测！ 1528

5 LeetCode算法小抄--二叉搜索树 113

6 小米基于 Flink 的实时数仓建设实践 128

7 便宜云服务器OpenSearch重磅推出LLM问答式搜索产品，助力企业高效构建对话式搜索服务 582

8 便宜云服务器“通义听悟”正式公测：用户可免费领100小时转写服务 7281

9 Bean异步初始化，让你的应用启动飞起来 5935

10 图解LeetCode——98. 验证二叉搜索树 11012

11 图解LeetCode——108. 将有序数组转换为二叉搜索树 90

12 Windows上的实用CMD命令 10863

13 关于编辑Windows的右键【新建】删除和添加 11134

14 SpringMVC总结_从RESTful到拦截器 10873

15 进阶篇丨链路追踪（Tracing）很简单：链路成本指南 6070

16 一口气整理三种不同运营商要素验证API的Java 接入代码 72

17 python异常处理 10674

18 Git分支教程：详解分支创建、合并、删除等操作 10923

19 玖章算术NineData荣获信通院“生成式人工智能技术和应用优秀案例”奖 652

20 Python编程数值类型布尔类型 90

相关电子书

更多

《优酷响应式布局技术全解析》

立即下载

低代码开发师（初级）实战教程

立即下载

阿里巴巴DevOps 最佳实践手册

立即下载

相关实验场景

更多