1.3 移动Web开发基础 1.3.1 视口 视口（Viewport）最早是由苹果公司在推出 iPhone 手机时发明的，其目的是为了让 iPhone 的小屏幕尽可能完整显示整个网页，它是浏览器显示页面内容的屏幕区域...视口能将大分辨率尺寸网页缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。 布局视口 布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。...屏幕分辨率是指一个屏幕上可以显示多少信息，通常以像素（px）为单位来衡量。在同一台设备上，图片的像素点和屏幕的像素点通常是一一对应的。...在屏幕的大小相同的情况下，如果屏幕的分辨率低（如640×480），则屏幕上显示的像素少，单个像素点比较大，看起来会有种颗粒感。...在屏幕的大小相同的情况下，如果屏幕的分辨率高（如1920×1080），则屏幕上显示的像素多，单个像素点比较小，看起来会比较清晰。
屏幕分辨率与显示分辨率不同。计算机可以修改显示分辨率，信号传递给屏幕，屏幕会进行计算，在屏幕上显示。...== 位图像素 在一个标准的显示密度下(普通屏)，一个 CSS 像素对应着一个设备像素，高清屏幕下一个 CSS 像素 等于 N 个物理像素 像素密度 屏幕上每英寸可以显示的像素点的数量，单位是 ppi...一般移动设备的浏览器都默认定义一个虚拟的布局视口（layout viewport），用于解决早期的页面在手机上显示的问题。 视口大小由浏览器厂商决定，大多数设备的布局视口大小为 980px。...viewport-fit 设置为 cover 可以解决『刘海屏』的留白问题 4-移动端事件 事件类型 移动端事件列表 touchstart 元素上触摸开始时触发 touchmove 元素上触摸移动时触发...事件绑定 方式一 方式二 点击穿透 touch 事件结束后会默认触发元素的 click 事件，如没有设置完美视口，则事件触发的时间间隔为 350ms 左右，如设置完美视口则时间间隔为 5ms
白话描述一下： ●计算机把图像渲染到显示器的过程中，会先把图像画在一个逻辑层的画布上，然后从这个画布中框选一部分，将其投影到显示层。 ●这个选框就是视口，显示层就是窗口。...按照 2.1 里的 viewport 的解释，如此的设计，会把逻辑层画布中 980px 的图像投影显示到 320px 的屏幕上，看到的效果便是一个挤在一起看不清楚细节的缩小版页面。 ?...注：Pad 设备虽然也是移动设备，但是因为屏幕足够宽，所以现在多数产品（如某宝）的方案都是访问 PC 站点了。...不做大的代码调整的话，等比缩放类的移动端网页，在 PC 上的合理展现方式应该是页面总宽度锁定在某个值，然后水平方向居中。（如下图） ?...在滚动到视图中之前，视口外部的内容在屏幕上不可见。 ●当前可见的视口部分称为可视视口。这可以小于布局视口，例如当用户进行缩放缩放时。该布局视口保持不变，但视觉视口变小。
它是指 网页中可见部分的大小，即浏览器窗口中显示的内容大小。 在移动设备上，由于屏幕较小，需要 对网页进行缩放以适应屏幕大小，因此布局视口也需要进行调整。...移动设备上的布局视口 通常比 桌面浏览器中的布局视口 小，因为 移动设备屏幕的大小通常比桌面屏幕小。...为了 使网页在 不同设备上 都能够 正确地显示和布局，开发者可以使用 响应式设计来根据设备的不同调整布局视口。...移动设备浏览器中，设备屏幕较小，页面需要进行缩放以适应屏幕大小，视觉视口 会比 布局视口 小。...下图中 , 在下面的 视觉视口 中 , 网页只能被看到一部分区域 ; 3、理想视口 ( 网页大小 = 设备大小 ) 理想视口 - Ideal Viewport 指的是指在浏览器中，使 网页布局 和 显示最佳的视口大小
大家如果只用电脑浏览网页的话，可能差别不算太大，但是如果使用移动设备（如手机和平板电脑）打开网页，就可能会遇到在不同设备上显示效果不尽人意。...移动端页面需要具备响应式设计，以适应不同大小和分辨率的移动设备屏幕。使用流体网格布局、弹性图片和媒体查询等技术，确保页面在各种设备上都能良好显示。...采用适合移动设备的布局方式，以确保用户在小屏幕上浏览时获得良好的用户体验。...是指浏览器用来显示网页的区域，它决定了网页在用户设备上的显示效果。由于移动设备和桌面设备有不同的屏幕尺寸和分辨率，使用视口可以使网页在不同设备上得到合适的显示。viewport 视口。...媒体查询媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定 CSS 样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。
本文不再对常见概念进行说明，如：设备分辨率、DPR、单位、视口、meta:viewport等，如果对这类概念不甚了解，可以先去搜索引擎查询了解下。 1....Step4: 将设计图中的尺寸换算成 rem Step3进行了html根节点文字大小设置，然而意义何在？自然是为了开发者计算的方便。...标签的font-size值(本案例100) 如：60px宽的div，不必关心屏幕尺寸缩放，只需要除以100，设置 width: 0.6rem; 即可 5....Step5: 媒体查询设置body字体大小 其实完成了上述Step1～4，已经基本完成了移动端的适配工作，然而，有些情况下，如资讯类文字较多的页面，如果在大屏设备上展示，文字会过大，影响阅读体验，此时需要调整文字大小...: none; 3.最小宽度和最大的宽度 在移动端开发的时候，如果想限制某个元素的大小，选用 max-width 限制最大值，为了不让用户无止境的缩放，使用min-width 防止在超小屏幕上显示错乱(
如下所示： 当显示地址栏时，由于移动浏览器错误地将100vh设置为屏幕高度而没有显示地址栏，因此屏幕底部被切断。在上图中，应隐藏在屏幕底部的按钮。...更糟糕的是，当用户首次访问移动设备上的网站时，地址栏将在顶部可见，因此默认的体验是破碎的体验。...如果地址栏是隐藏的，则window.innerHeight将是屏幕上可见部分的高度，这正是您所期望的。 在Wordsheet.io上学习时，您可以看到这一点。...例如，尝试在移动浏览器上打开wordsheet.io/demo/V3Y 。无论地址栏是否可见，屏幕都将是视口的高度。...遗憾的是，在不依赖JavaScript的情况下，仍然没有一种简单的方法来使元素占据整个视口高度。 height: 100vh 非常接近 ，但鉴于其在移动设备上的局限性，最好避免使用它。
CSS中的视口单位听起来很棒。如果要设置元素的样式以占据整个屏幕的高度，则可以设置height: 100vh，您拥有一个完美的全屏元素，该元素会随着视口的变化而调整大小！可悲的是，事实并非如此。...当显示地址栏时，由于移动浏览器错误地将100vh设置为屏幕高度而没有显示地址栏，因此屏幕底部被切断。在上图中，应隐藏在屏幕底部的按钮。...更糟糕的是，当用户首次访问移动设备上的网站时，地址栏将在顶部可见，因此默认的体验是破碎的体验。...例如，尝试在移动浏览器上打开wordsheet.io/demo/V3Y 。无论地址栏是否可见，屏幕都将是视口的高度。...遗憾的是，在不依赖JavaScript的情况下，仍然没有一种简单的方法来使元素占据整个视口高度。 height: 100vh 非常接近 ，但鉴于其在移动设备上的局限性，最好避免使用它。
点击Hierarchy区域中的对象，同时将鼠标移动三维显示区域，同时点击键f，则该对象自动适配显示到三维区域中心，如 13. ...现在你将会发现刚体属性显示在检视面板中，如果在该物体被选中的情况下按下播放键(Play)你将会有惊喜的发现。注意刚体是如何在一个空物体上添加功能的。 ...正规化视口矩形(Normalized View Port Rect)：在屏幕坐标系下使用四个值来确定相机的哪些部分将显示在屏幕上。 ? Xmin：相机视开始绘制的开始水平坐标 ?...你可以调整正规化视口矩阵 (Normalized View Port Rectangle)属性以调整相机视在屏幕上的大小和位置。...正规化视口矩形 (Nomalized Viewport Rectangle) 正规化视口矩形能够定义相机的视将显示屏幕的什么位置上。
，这会让顶点发生很多变化，是观察变换里最复杂的部分 3.视口变换部分 最右边的步骤，将规范视体中的三维顶点们投影到二维的屏幕空间中，这以后才能光栅化顶点渲染到屏幕的像素上 视口变换部分 上面介绍了渲染顺序后...窗口变换假设我们现在的视体就是流程图中右下角的规范正方体视体，且当前是一个正交投影所以我们不必担心近大远小的问题，然后我们要把这个正方体中的顶点和线转为屏幕上的二维坐标 回到刚开始的3.2节中，我们讲到了屏幕坐标排列的问题...；最后我们将这个投影好的矩形进行移动，移动到适配屏幕左下角坐标系的形式。...相机变换 再回到流程图中，这就到了最后的一个变换部分了，前面的变换都假设物体已经稳稳当当地放在视体中了，但实际上我们需要利用变换让相机坐标移动到需要的位置并让视体对准我们要的物体，再把物体的坐标从世界坐标系转换到相机坐标系中提供给上面的变换...而这种变换显然是非线性变换，如何在矩阵运算中处理这个问题呢？上一节介绍仿射变换的时候提到了标记位w在透视投影中有意义，这就是这里使用到的透视除法，这个w值是其他坐标的缩放程度。
在手机互联网没有普及前，网络上绝大部分页面都是为电脑端浏览而做的，根本没有做移动端的适配。 随着移动端的发展，在手机上看电脑端的页面已成为非常普及现象。...于是浏览器厂商为了让用户在小屏幕下网页也能够显示地很好，所以把布局视口设置的很大，一般在768px ~ 1024px 之间，最常用的宽度就是 980。...故布局视口是看不见的，浏览器厂商设置的一个固定值，如980px，并将980px的内容缩放到手机屏内。一块手机屏幕，物理像素的数量是固定不变的。...所以苹果引入了理想视口，它对设备来说是最理想的布局视口，用户不需要对页面进行缩放就能完美的显示整个页面。最简单的做法就是使布局视口宽度设置为手机屏幕的宽度。移动端到底怎么适配不同的屏幕呢？...，宽度设置固定的值，总宽度为640px，根据屏幕宽度动态生成viewport。
一、英寸 一般用英寸描述屏幕的物理大小，如电脑显示器的 17、 22，手机显示器的 4.8、 5.7等使用的单位都是英寸。 需要注意，上面的尺寸都是屏幕对角线的长度： ?...一张图片在屏幕上显示时，它的像素点数是规则排列的，每个像素点都有特定的位置和颜色。...4.5 移动端适配 为了在移动端让页面获得更好的显示效果，我们必须让布局视口、视觉视口都尽可能等于理想视口。...，位图由一个个像素点构成的，每个像素都具有特定的位置和颜色值： ? 理论上，位图的每个像素对应在屏幕上使用一个物理像素来渲染，才能达到最佳的显示效果。...如：在 dpr=2的屏幕上展示两倍图 (@2x)，在 dpr=3的屏幕上展示三倍图 (@3x)。 ?
一、基础知识 1、屏幕 移动设备与PC设备最大的差异在于屏幕，这主要体现在屏幕尺寸和屏幕分辨率两个方面。 通常我们所指的屏幕尺寸，实际上指的是屏幕对角线的长度（一般用英寸来度量）。...PPI设备上的显示大小不一样。...PC设备设计的网页也能在移动设备上正常显示，移动设备厂商也的确是这样来处理的。...在移动设备上viewport不再受限于浏览器的窗口，而是允许开发人员自由设置viewport的大小，通常浏览 器会设置一个默认大小的 viewport，为了能够正常显示那些专为PC设计的网页，一般这个值的大小会大于屏幕的尺寸...从图中统计我们得知不同的移动厂商分别设置了一个默认的viewport的值，这个值保证大部分网页可以正常在移动设备下浏览。
每英寸像素(PPI) 每英寸像素（英语：Pixels Per Inch，缩写：PPI），又被称为像素密度，是一个表示打印图像或显示器单位面积上像素数量的指数。一般用于计量电子设备屏幕的精细程度。...在尺寸较大的设备中，在这些设备上，应用显示区域不一定是全屏的，viewport 是浏览器窗口的大小。 在大多数移动设备中，浏览器是全屏的，viewport 是整个屏幕的大小。...这个特性主要被用于移动设备，但是也可以用在支持类似“固定到边缘”等特性的桌面浏览器，如微软的Edge。 按百分比计算尺寸的时候，就是参照的初始视口（viewport）。...初始视口指的是任何用户代理和样式对它进行修改之前的视口。桌面浏览器如果不是全屏模式的话，一般是基于窗口大小。 在移动设备上（或者桌面浏览器的全屏模式），初始视口通常就是应用程序可以使用的屏幕部分。...} 坐标系统 通过上述对设备屏幕跟视口的介绍，我们应该可以对电子设备中的浏览器显示情况有了基本的了解。那么接下来我们来了解一下浏览器中的坐标系系统。
100vh在不同的浏览器的实现方式上也有一点微妙的变化，这使得它几乎毫无用处。最好避免100vh，而是依赖javascript来设置高度，以获得完整的视口体验。...核心问题是移动浏览器(Chrome和Safari)有一个“帮助”功能，地址栏有时可见，有时隐藏，改变了视口的可见大小。...这些浏览器没有将100vh的高度调整为视口高度变化时屏幕的可见部分，而是将100vh设置为隐藏地址栏的浏览器高度。结果是，当地址栏可见时，屏幕的底部部分将被切断，从而破坏了100vh的初衷。...如下所示： 当地址栏可见时，由于移动浏览器不正确地将100vh设置为屏幕高度而没有显示地址栏，因此屏幕底部被切断。在上图中，应该在屏幕底部的按钮被隐藏了。...遗憾的是，仍然没有一种简单的方法可以让一个元素在不依赖javascript的情况下占据整个视口高度。height: 100vh是如此接近伟大，但考虑到它在移动设备上的局限性，最好避免它。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
