移动Web知识点小结

最新推荐文章于 2022-12-12 08:17:21 发布

无处安放的前端

最新推荐文章于 2022-12-12 08:17:21 发布

阅读量1.1k

点赞数 1

分类专栏：笔记整理移动端

本文链接：https://blog.csdn.net/qq_43512502/article/details/89296796

版权

笔记整理同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

移动端

1 篇文章 0 订阅

订阅专栏

基础知识

屏幕
移动设备与PC设备最大的差异在于屏幕，这主要体现在屏幕尺寸和屏幕分辨率两个方面。通常我们所指的屏幕尺寸，实际上指的是屏幕对角线的长度 ,而分辨率则一般用像素来度量 px，表示屏幕水平和垂直方向的像素数，例如1920*1080指的是屏幕垂直方向和水平方向分别有1920和1080个像素点而构成
长度单位
在Web开发中可以使用px（像素）、em、pt（点）、in（英寸）、cm（厘米）做为长度单位，我们最常用px（像素）做为长度单位。我们可以将上述的几种长度单位划分成相对长度单位和绝对长度单位。
像素
物理像素指的是屏幕渲染图像的最小单位，属于屏幕的物理属性，不可人为进行改变，其值大小决定了屏幕渲染图像的品质，我们以上所讨论的都指的是物理像素。
```
获取屏幕的物理像素尺寸
window.screen.width;
window.screen.height;
```
CSS像素，与设备无关像素，指的是通过CSS进行网页布局时用到的单位，其默认值(PC端)是和物理像素保持一致的（1个单位的CSS像素等于1个单位的物理像素），但是我们可通缩放来改变其大小。

视口

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

在PC设备上viewport的大小取决于浏览器窗口的大小，以CSS像素做为度量单位。

通过以往CSS的知识，我们都能理解<html>的大小是会影响到我们的网页布局的，而viewport又决定了<html>的大小，所以viewport间接的决定并影响了我们网页的布局。

获取viewport的大小
document.documentElement.clientWidth;
document.documentElement.clientHeight;

在移动设备上viewport不再受限于浏览器的窗口，而是允许开发人员自由设置viewport的大小，通常浏览器会设置一个默认大小的viewport，为了能够正常显示那些专为PC设计的网页，一般这个值的大小会大于屏幕的尺寸。

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

// 获取layout viewport
document.documentElement.clientWidth;
document.documentElement.clientHeight;

屏幕适配

Viewport详解

viewport 是由苹果公司为了解决移动设备浏览器渲染页面而提出的解决方案，后来被其它移动设备厂商采纳，其使用参数如下：

// 通过设置属性content=""实现，中间以逗号分隔

// 例如<meta name="viewport" content="width=device-width">

width 设置layout viewport 宽度，其取值可为数值或者device-width。

height 设置layout viewport 高度，其取值可为数值或者device-height

initital-scale设置页面的初始缩放值，为一个数字，可以带小数。

maximum-scale允许用户的最大缩放值，为一个数字，可以带小数。

minimum-scale允许用户的最小缩放值，为一个数字，可以带小数。

user-scalable是否允许用户进行缩放，值为"no"或"yes"。

注：device-width 和 device-height就是ideal viewport的宽高。

控制缩放

1、设置<meta name="viewport" content="initial-scale=1">，这时我们发现网页没有被浏览器设置缩放。

2、设置<meta name="viewport" content="width=device-width">，这时我们发现网页也没有被浏览器设设置缩放。

当我们设置width=device-width，也达到了initial-scale=1的效果，得知其实 initial-scale = ideal viewport / layout viewport。

两种方式都可以控制缩放，开发中一般同时设置width=device-width和initial-scale=1.0（为了解决一些兼容问题）

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

通过汇总对比我们知道移动设备的屏幕尺寸虽然庞杂，但有几个主要尺寸，分别为320px、360px，这三个尺寸占了绝大部分，并且以320px最多，所以我们移动网页如果设计成320px宽，则可以保证在绝大多数设备里正常显示

避免滚动

我们知道，滚动条是 layout viewport 相对于 ideal viewport 的，所以只要设置 layout viewport 小于或等于 ideal viewport，即<meta name="viewport" content="width=device-width">。

固定宽度

设置<meta name="viewport" content="width=device-width, initial-scale=1">

设置内容区域大小为320px

设置内容区域水平居中显示

无处安放的前端

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
移动Web知识点小结

基础知识屏幕移动设备与PC设备最大的差异在于屏幕，这主要体现在屏幕尺寸和屏幕分辨率两个方面。通常我们所指的屏幕尺寸，实际上指的是屏幕对角线的长度 ,而分辨率则一般用像素来度量 px，表示屏幕水平和垂直方向的像素数，例如1920*1080指的是屏幕垂直方向和水平方向分别有1920和1080个像素点而构成长度单位在Web开发中可以使用px（像素）、em、pt（点）、...
复制链接

扫一扫

专栏目录