博客站

viewport与移动端布局详解

一、viewport概念及类型

viewport（视口）在网页布局中起着至关重要的作用，特别是在移动端设备上。它决定了网页内容如何在屏幕上显示。viewport主要分为以下三种类型：

1. 布局视口（Layout Viewport）：

   • 这是一个虚拟的视口，用于解决早期页面在手机上显示的问题。
   • 大多数移动设备浏览器默认将布局视口的宽度设置为980px（或类似值），以确保PC上的网页能在手机上呈现，尽管元素看起来很小。
   • 可以通过HTML中的meta标签来显式设置布局视口的宽度，如<meta name="viewport" content="width=400">。

2. 视觉视口（Visual Viewport）：

   • 这是用户当前在屏幕上看到的区域。
   • 用户可以通过缩放操作来改变视觉视口的大小，同时不会影响布局视口。
   • 视觉视口和缩放比例的关系为：当前缩放值=理想视口宽度/视觉视口宽度。

3. 理想视口（Ideal Viewport）：

   • 这是对设备而言最理想的布局视口尺寸。
   • 理想视口的值其实就是屏幕分辨率的值，对应的像素叫做设备逻辑像素（device independent pixel，dip）。
   • 可以使用<meta name="viewport" content="width=device-width">来使布局视口与理想视口的宽度一致，这是响应式布局的基础。

二、viewport的设置

viewport的设置主要通过HTML中的meta标签来实现，常用的属性包括：

• width：定义视口的宽度，单位为像素。可以设置为正整数或device-width。
• height：定义视口的高度，单位为像素。但一般不常用。
• initial-scale：定义初始缩放值，范围为0.0到10.0。
• minimum-scale：定义放大最大比例，它必须小于或等于maximum-scale设置的值。
• maximum-scale：定义缩小最小比例，它必须大于或等于minimum-scale设置的值。
• user-scalable：定义是否允许用户手动缩放页面，默认值为yes。

三、移动端布局方案

移动端布局方案有多种，以下是几种常见的方案：

1. 流式布局：

   • 宽度使用百分比代替固定宽度，高度大多使用px固定。
   • 优点：可以很好地解决自适应问题。
   • 缺点：实际显示效果可能不协调，大量使用百分比布局可能会出现兼容问题。

2. 固定布局：

   • 设置viewport，布局与PC端一致，假设整个网页的宽度为320px居中，超出部分留白。
   • 优点：思路沿用PC端，上手容易。
   • 缺点：大屏幕手机及手机横屏时，两侧留白较大，且显示内容看起来较小，用户体验较差。

3. 响应式布局：

   • 一个网站适配所有终端，实现不同屏幕分辨率下的终端上网页的不同布局。
   • 使用媒体查询针对不同宽度的设备进行布局和样式设置。
   • 优点：一站适配所有终端，减少工作量，缩短开发周期，对搜索引擎表现更友好。
   • 缺点：在老版本浏览器中兼容不好，兼容各种设备工作量大，效率低，加载更多的样式和脚本文件，设计比较难于精确定位和控制。

4. rem布局：

   • 使用css3新增的rem单位进行布局，rem是相对于根元素的字号大小的单位。
   • 优点：可以通过调整根元素的字号来实现整体布局的缩放。
   • 缺点：需要额外计算根元素的字号，且在某些情况下可能不如其他布局方案灵活。

综上所述，viewport在移动端布局中起着至关重要的作用。通过合理设置viewport和相关属性，可以实现网页在不同设备上的良好显示效果。同时，根据项目的具体需求选择合适的布局方案也是非常重要的。