移动前端学习笔记（1）——视口（viewport）基础

最新推荐文章于 2025-06-16 17:51:23 发布

想成为大佬的鸭子

最新推荐文章于 2025-06-16 17:51:23 发布

阅读量337

点赞数 1

CC 4.0 BY-SA版权

分类专栏：移动端文章标签：移动web 前端

本文链接：https://blog.youkuaiyun.com/weixin_41309331/article/details/97807771

移动端专栏收录该内容

5 篇文章

订阅专栏

本文是移动前端学习笔记的第一部分，重点介绍了视口（viewport）的基础知识，包括基本概念、设备独立像素、物理像素和CSS像素的区别，以及在PC设备、移动设备和移动浏览器中的应用。此外，还探讨了屏幕适配和控制缩放的方法，帮助开发者理解如何处理不同设备的显示问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习web移动开发的第一步，是要掌握好移动端显示的一些基本概念。

首先，贴一下一个资深整理人的博客，感觉整理得很到位。

基本概念

屏幕尺寸：通常我们所指的屏幕尺寸，实际上指的是屏幕对角线的长度（一般用英寸来度量）。

屏幕分辨率：一般用像素来度量，表示屏幕水平和垂直方向的像素数，例如1920*1080指的是屏幕垂直方向和水平方向分别有1920和1080个像素点而构成。

PPI（Pixels Per Inch）：像素密度，来表示屏幕每英寸的像素数量，可利用勾股定理计算PPI。

设备独立像素：

像素单位的缺陷：不同设备的像素密度PPI是不同的，如 iPhone3G/S 为163PPI，iPhone4/S 为326PPI，这导致同样尺寸的图像在不同PPI设备上的显示大小不一样。比如说一张163*163px 的图片，它在 iPhone3G/S 中是1*1寸，但是在 iPhone4/S 中却是0.5*0.5寸。

设备独立像素：

设备独立像素是一个新的单位，它与像素单位有一个对应的比例关系。在IOS设备上叫PT(Point)，Android设备上叫DIP(Device independent Pixel)或DP。

如 iPhone 3G（PPI为163）中1dp = 1px，iPhone 4（PPI为326）1dp = 2px。那么一张163*163dp的图片，在iphone3中是163*163px，在iphone4中是326*326px，最终用户看见的图片大小是差不多大的。

获取当前设备独立像素：window.devicePixelRatio 可以获得该比例值

物理像素和CSS像素

物理像素：物理像素指的是屏幕渲染图像的最小单位，属于屏幕的物理属性，不可人为进行改变，其值大小决定了屏幕渲染图像的品质，我们以上所讨论的都指的是物理像素。

获取屏幕的物理像素尺寸：

window.screen.width;
window.screen.height;

CSS像素：

与设备无关像素，指的是通过CSS进行网页布局时用到的单位，其默认值(PC端)是和物理像素保持一致的（1个单位的CSS像素等于1个单位的物理像素），但是我们可通缩放来改变其大小。

视口（viewport）

视口（viewport）是用来约束网站中最顶级块元素<html>的，即它决定了<html>的大小。

PC设备

在PC设备上 viewport 的大小取决于浏览器窗口的大小，以CSS像素做为度量单位。通过调整浏览器窗口可以改变viewport的大小，为了保证网页布局不发生错乱，需要给元素设定较大固定宽度。（可能出现滚动条）

获取 viewport 大小：

document.documentElement.clientWidth;
document.documentElement.clientHeight;

移动设备

在移动设备上 viewport 不再受限于于浏览器的窗口，而是允许开发人员自行设置。通常移动设备浏览器会默认设置一个viewport的值，一般这个值的大小会大于屏幕的尺寸。

移动设备上有两个 viewport，分别是 layout viewport 和 ideal viewport。

（1）layout viewport（布局视口）指的是我们可以进行网页布局区域的大小，以CSS像素作为计量单位，可以通过以下方式获取：

document.documentElement.clientWidth;
document.documentElement.clientHeight;

实际上上面所说的移动设备设置 viewport 的大小，设置的就是layout viewport。

（2）ideal viewport（理想视口）指的是设备屏幕区域，（以设备独立像素PT、DP做为单位）以CSS像素做为计量单位，其大小是不可以被改变的，通过下面方式可以获取：

// 获取ideal viewport有两种情形
// 新设备
window.screen.width;
window.screen.height;
// 老设备
window.screen.width / window.devicePixelRatio;
window.screen.height / window.devicePixelRatio;

（3）为什么网页会被缩放或出现水平滚动条？

原因是移动设备浏览器会默认设置一个 layout viewport，且通常会大于 ideal viewport，因此，要将 layout viewport 的内容显示在屏幕区域内，就会出现滚动条了。

而有些移动厂商认为将网页完整显示给用户才最合理，而不该出现滚动条，所以就将layout viewport进行了缩放，使其恰好完整显示在ideal viewport（屏幕）里，其缩放比例为ideal viewport / layout viewport。

移动浏览器

移动端开发主要是针对IOS和Android两个操作系统平台的，除此之外还有Windows Phone。

移动端主要可以分成三大类，系统自带浏览器、应用内置浏览器、第三方浏览器

系统浏览器：指跟随移动设备操作系统一起安装的浏览器。

应用内置浏览器：通常在移动设备上都会安装一些APP例如QQ、微信、微博、淘宝等，这些APP里往往会内置一个浏览器，我们称这个浏览器为应用内置浏览器（也叫WebView），这个内置的浏览器一般功能比较简单，并且客户端开发人员可以更改这个浏览器的某些设置，在我们理实的开发里这个浏览器很重要。

第三方浏览器：指安装在手机的浏览器如FireFox、Chrome、360等等。

在IOS和Android操作系统上自带浏览器、应用内置浏览器都是基于Webkit内核的。

屏幕适配

viewport

<meta name="viewport" content="">

content 用来设置属性

width	设置layout viewport 宽度，其取值可为数值或者device-width，device-width 就是ideal viewport 的宽
height	设置layout viewport 高度，其取值可为数值或者device-height，device-width 就是ideal viewport 的高
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数，initial-scale = ideal viewport / layout viewport
maximum-scale	设置允许用户的最大缩放值，为一个数字，可以带小数
minimum-scale	设置允许用户的最小缩放值，为一个数字，可以带小数
user-scalable	是否允许用户进行缩放，值为 "no" 或 "yes"

控制缩放

（1）

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

（2）

<meta name="viewport" content="initital-scale=1">

为了解决一些兼容问题，一般两个都加：

<meta name="viewport" content="width=device-width, initial-scale=1.0">