移动前端学习笔记(1)——视口(viewport)基础

本文是移动前端学习笔记的第一部分,重点介绍了视口(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">

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值