联系电话136 8812 4668(业务咨询) / 158 8206 4880(服务投诉)
赛门仕博官网

1

2018年08月09日

移动端网站开发:视口

移动端网站开发说明之前先来看一个典型例子:

移动端网站开发

上述代码在做移动端网站开发时经常去书写的方式。它研究了两个内容:meta视口和宽度媒体查询。通常我们都会称上述代码为CSS3的媒体查询功能。使用媒体查询功能能够解决针对桌面级的网站设计在移动端网站不同尺寸下的兼容展现。


一、像素

研究移动端视口之前,先说明一下像素。像素是网页布局的基础,网站开发者凭直觉使用。一个像素就是计算机屏幕能显示一特定颜色的最小区域。实际上有两种像素:设备像素,css像素。

设备像素:设备屏幕的物理像素,任何设备的物理像素的数量都是固定的。

CSS像素:为网站开发者创造的,在CSS(和JavaScript)中使用的一个抽象的层。

说明一下:网站开发过程中,我们基本使用的都是CSS像素,设备像素基本不会用。例如:width:200px 的元素跨越了200个CSS像素。CSS像素相当于多少个设备像素取决于屏幕的特性(是否高密度)和用户进行的缩放。当用户放大的越大,一个CSS像素覆盖的设备像素就越多,因此这个元素不一定会跨越css设置等值的设备像素。在旧的屏幕上,当缩放程度为100%时,一个CSS像素等于一个设备像素。在高密度屏幕上,例如苹果的视网膜屏幕,一个CSS像素跨越了多个设备像素。对照下图:

(红色表示CSS像素、蓝色表示设备像素)

网站开发:像素

在移动端网站开发中,操作的是CSS像素,让CSS像素去覆盖设备像素。不过当使用CSS和JavaScript的时候,其实并不会在意一个CSS像素跨越了多少个设备像素。这个依赖于屏幕特性和用户缩放程度的计算由浏览器完成。


二、三个视口

在移动端网站开发中经常会使用到例如width:35%这样的代码去布局。它表示占用父元素的百分比宽度。我们看html文档结构知道最外层的一层是html元素。那么html元素的包含块是什么?这就是要说得视口了。在CSS标准文档中,它被称为初始包含块。这个初始包含块是所有CSS百分比宽度推算的根源。(在桌面电脑上,视口的宽度和浏览器窗口的宽度一致)。


1、布局视口

移动端设备如果使用视口的宽度和浏览器窗口宽度一样会导致网站页面展示很丑陋。想象一下。一个针对桌面级的左右结构页面布局,左侧占浏览器窗口的20%,右侧占80%。这样的网站页面在我们小屏幕的移动端设备上会缩放的非常小。也许会导致大部分数据重叠覆盖,也可能导致数据遮挡无法显示全部。

所以,移动端网站开发必须保证即使在窄屏幕下我们的页面可以展示的很好,将视口的宽度设计得比屏幕宽度宽出很多。这样。在移动端,视口与移动端浏览器屏幕宽度就不再关联,而是完全独立的了。我们称它为“布局视口”。CSS布局会根据它来计算并被约束。看下面的图例,体会一下布局视口

移动网站开发:布局视口

2、视觉视口

虽然独立的布局视口很大程度上帮助了pc网站过渡到手机上。但不能完全忽视移动设备上网站的屏幕尺寸。所以就来说明一下视觉视口吧。视觉视口是用户正在看到的网站的区域。用户可以通过缩放来操作视觉视口,同时不会影响布局视口。布局视口还是保持在原来的宽度。看下图说明一下视觉视口区域:

网站开发:视觉视口

如上图,红色箭头之间的区域就是视觉视口的区域。它和设备的屏幕一样宽,并且它的CSS像素的数量会随着用户缩放而改变。


3、理想视口

布局视口的默认宽度并不是一个理想的宽度。显然用户希望在进入网站页面时可以不需要缩放就可以有一个理想的浏览和阅读尺寸。理想视口仍是为移动端设备准备的。只有手动添加meta视口标签方才生效。如果没有meta视口标签,那么布局将会维持它的默认宽度。

如下代码,告诉浏览器,布局视口的宽度应该与理想视口的宽度一致。(一般来讲我们都会将布局视口的宽度设为设备宽度一样,然后使用css媒体查询编写一套针对移动端网站的展示方案。)

<meta name="device" content="width=device-width">

定义理想的视口是网站开发和浏览器的工作,不是设备或操作系统的工作。另外,在移动端网站开发中书写meta视口时,应向本篇开始时的典型例子那样去书写。


三、总结

本篇介绍了css像素和设备像素。在网站开发(无论pc端还是移动端)中基本上使用的都是css像素。还介绍了网站开发中的三种视口-布局视口,视觉视口,理想视口。

布局视口:不再与移动端浏览器相关联,完全是独立的。实际上布局视口的宽度要比屏幕宽出很多。

视觉视口:用户看到的网站展示区域,一般视觉视口和设备宽度一致。并且它的CSS像素的数量会随着用户缩放而改变。

理想视口:为了使网站在移动端有最理想的浏览和阅读宽度而设定。需要手动添写meta视口标签通知浏览器操作。使用它配合css媒体查询制定移动端网站展示方案。

文章转载来源:腾讯云社区