稻草日志分享:移动前端开发基础之什么是视口

王亚兵4个月前 (11-01)web前端基础141

现在很多人都是通过手机或者其他的移动设备来浏览网页,而且我们会发现,其实在移动短的网页,和pc端页面布局有些许的区别。很容易理解。web前端开发中毕竟终端不一样,页面显示效果不一样。pc端屏幕很大,如果强行嫁接到移动端上,会出现很多问题,最主要的就是字体小,或页面显示不全。几天给大家引入一个视口的概念解决欧文这个问题。

移动前端开发基础之什么是视口

首先什么是视口?用官方的话说就是浏览器显示页面的屏幕区域。简单点说就是屏幕显示页面的区域。就是值你在屏幕浏览器中能看到的页面的区域。浏览器中除了地址栏、标签页、工具栏这些区域之外我们浏览网页的区域都算是视口。有些比较严厉的定义,回去掉滚动条。

移动前端开发基础之什么是视口

视口中共可以分成三类,布局视口,视觉视口,理想视口。接下来我会分别给大家说一下这三个视口的作用。

第一个是布局视口,这个视口诞生的初衷是为了解决pc端网页在移动端设备上显示的问题。我们都知道,近几年移动智能设备的更新迭代很快。但是在智能手机刚诞生的时候,为了让我们的pc端页面能在移动手机上显示所以就有人提出了布局视口的概念。但是布局视口一般只有980像素。在移动端显示页面时,页面元素非常小,所以非常不方便。需要通过对页面进行缩放才能清晰看到页面内容。目前在移动端不是很常用。

第二个是视觉视口,就是我们用户看到页面的区域。这个视口直接影响到我们用户体验。前面说过我门可以通过手指所放页面的视觉视口。但是不会影响我亲啊面提到的布局视口。所以pc端页面大多情况下我们用户是不能一次想看全的,同样移动端口开发中不是很长用。

第三种就是理想视口。就是一个我们移动端最完美的一个视口。也就是页面正常显示,又能被我们用户正常的浏览。根据我们设备的屏幕情况,进行相应的视口布局。也是我们目前移动开发中比较常用的。这个理想视口是乔布斯提出来的。

通过今天的分享,我希望大家能够了解移动前端开发基础中视口的知识点,了解什么是视口以及视口的分类,下次我们将分享如何实现理想视口。

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。