ビューポートは、モバイルエンドのメタ属性を新しいHTML5を開発することである、その役割は、応答性のソリューションを提供し、異なるデバイスで同じページをレンダリングすることです。この記事の試みバイ・ステップのアプローチ、読者により明確かつ包括的な技術的な知識を与えることを期待し、ビューポート設計原理を探求する層ごと。
I.はじめに
PCの時代に、私たちはCSSで1pxの境界線を設定し、ディスプレイは、物理的なピクセルでレンダリングされます。そして、モバイルアプリケーションの時代に入った後、我々はレンダリングするために、2つのまたは3つの物理ピクセルを使用する必要があります電話で、1ピクセルの境界線を設定していました。
それでは、なぜ電話しますか?この問題を解決しますか?どのような開発プロセスと私たちは何をする必要がありますか?
以下では、携帯端末ビューポートの設計原理を探求するだけでなく、ビューポートの移動端末適応を使用する方法ステップによって、これらの問題の一歩を踏み出すます。
第二に、基本的な概念
図1に示すように、画面サイズ
携帯電話の画面対角線長ピタゴラス定理によって計算することができる画面の対角線の幅ノウハウ(幅)と高さ(高さ)の画面サイズを指します。
そして、長さ「インチ(インチ)」の用語でこれを入れて、我々は通常の携帯電話のサイズを言うことです。
1インチ、すなわち、25.4ミリメートルに等しいです:
こうしたiPhone 3.5インチ、4インチ、4.7インチ、5.5インチなどなどの一般的なサイズ。
図2に示すように、物理的なピクセル
我々は、物理的な発光画素から本質的に構成されている、スクリーン電話に表示画素は、物理的な画面を構成する最小単位です。
私たちは、多くの場合、画面解像度があり、この画面上の物理的なピクセル数を指していることを言います。
例えば:iPhone4の解像度、すなわち、画面が水平方向に640個の画素、垂直方向に960個の画素を有し、640×960です。
典型的には、設計案にUI設計上のPXは、物理的なピクセルを意味します。
図3に示すように、画素密度 - PPI
PPI(対角により、ピクセル毎インチ):所有する対角線上の1インチあたりのピクセル数を表します。
PPIを計算する、単純で割った対角線、対角線長さにピタゴラスの定理画素を用いて計算することができます。
iPhone 4の画面データ式に、あなたはPPI iPhone4のに来ることができます。
PPI値が大きいほど、スクリーン上の1インチあたりの物理ピクセルより高密度は、こうして画像のうちレンダリングすることはまた、より繊細で明らかです。
比如,iphone3GS 和 iphone4 拥有相同大小的屏幕。但前者的分辨率是 320*480,可以算出PPI为 163,而后者的分辨率是 640*960, 其PPI是326。
这就导致 iphone4 在画面呈现上比 iphone3GS 更加清晰和细腻。
4、PPI 导致的问题
我们先看下面的两张图有什么区别?
很明细,左边的图要比右边的看着舒服。
左边的字体大小适中,图片文字都能看的清楚,相比而言,右边的字体就太小了,让用户阅读变得困难。
那么,这个问题是怎么造成的呢?
我们先来做一个对比实验,如下图所示:
左图和右图分别代表两块尺寸相同的屏幕,长度和宽度均为 5cm,屏幕上的每个方格代表一个物理像素点。
唯一不同的是,左边屏幕分辨率为5 × 5,而右边屏幕分辨率为 10 × 10 。
现在屏幕上放了一个按钮,它的 css 样式为:
.button { width: 3px; height: 1px; }
从图上的效果可以看出,虽然我们为两个按钮设置了相同的大小,但右屏上的按钮比左屏上的按钮小了很多。
所以我们会发现,相同尺寸的屏幕,像素点越多,每个物理像素点“自身”大小就越小,从而导致渲染出来的图像就会越小。
也就是说,设置相同大小的样式,屏幕的 PPI 越大,渲染出来的图像就越小。
这其实是一个问题。
在移动时代,手机的大小和分辨率参差不齐,从而导致PPI也不尽相同。当我们把一个web页面放到PPI不同的设备上浏览时,就会出现“大小各异”的效果,违背了我们对 css 样式 “所见即所得” 的认知。
为了让同一个元素在所有设备上看起来都差不多大,设备厂商给显示屏幕增加了 “缩放因子”。
5、缩放因子 - DPR
这里的缩放因子并不是对图像本身进行缩放,而是使用更多的像素来渲染同一个元素。
如下图所示,同样大小的矩形,在第一个设备上用过了 8×1 个物理像素来渲染,而在第二个设备上用了 16×2 个物理像素来渲染,在第三个设备上则用了 24×3 个物理像素来渲染。
这样以来,同一个元素在所有设备上的显示效果都一样了!
从图上可以看出,屏幕的PPI越大,缩放因子就越大。如果以第一个屏幕为基准,这三个屏幕的缩放因子分别为: 1、2、3。
通常我们把 “缩放因子” 叫做 DPR。DPR 是 device pixel ratio 的缩写,即设备像素比。
这里需要注意的是:
dpr 的大小并不是通过固定公式计算出来的,而是厂商给屏幕设置的一个固定值,出厂时就确定了,它的大小不会随着程序的设置而改变。
6、DPR 和 PPI 的对应关系
不同平台定义 DPR 的基线 PPI 是不同的。
由于第一代 iPhone 的 PPI 是163,所以苹果把 163 作为缩放基线。
因此,在 iPhone 中, PPI=163 是1x 屏,PPI=326 是 2x 屏。
PPI |
163 |
326 |
401 |
458 |
DPR |
1 |
2 |
3 |
3 |
代表机型 |
iPhone3GS |
iPhone4 |
iPhone6P |
iPhoneX |
而 Android 的缩放基线 PPI 是160,所以 PPI=160 是 1x 屏,PPI=320 是 2x 屏。
从图中可以看出:
DPR 的大小和 PPI 正相关,但不成正比,我们无法通过特定的公式来计算它的大小。
7、逻辑像素和逻辑分辨率
对于同一个元素,DPR 越大,屏幕所需要的物理像素就越多,这是我们上面得出的结论。
那么,在软件程序中,元素的大小到底应该写成多少px?
为了解决这个问题,我们引入 “逻辑像素” 的概念,即 css 中写的 px 。
所谓逻辑像素,就是它的大小和物理像素不是一一对应的。
假设,我们现在设置一个元素的css样式如下:
.el { width: 8px; height: 1px; }
那么,这个元素在不同屏幕上渲染方式是不同的:
在 dpr=1 的屏幕上,1个逻辑像素对应1个物理像素。
在 dpr=2 的屏幕上,1个逻辑像素需要对应2个物理像素,才能保证元素同等大小。
同理,在 dpr=3 的屏幕上,1个逻辑像素对应3个物理像素,才能保证元素同等大小。
因此,我们可以得出一个结论:
一个逻辑像素在不同屏幕上所表示的物理像素数是不同的,它的大小和 dpr 一一对应。
有了这个理论,我们就能推导出屏幕的逻辑分辨率,也就是屏幕的 “逻辑宽度” 和 “逻辑高度”。
比如 iPhone6 的物理分辨率为 750 × 1334,dpr = 2, 带入公式就可以得出其逻辑分辨率:
屏幕的逻辑分辨率也可以通过 DOM API 来获取:
// iPhone6 window.screen.width;// 375px window.screen.height;// 667px
通常,我们在 CSS 中设置的元素尺寸,本质上都是基于逻辑分辨率进行布局的。
8、iPhone 常见的几种规格
设备 |
逻辑分辨率(point) |
物理分辨率(pixel) |
屏幕尺寸 |
dpr |
PPI |
iPhone 3GS |
320 × 480 |
320 × 480 |
3.5寸 |
1 |
163 |
iPhone 4 |
320 × 480 |
640 × 960 |
3.5寸 |
2 |
326 |
iPhone 5 |
320 × 568 |
640 × 1136 |
4.0寸 |
2 |
326 |
iPhone 6 |
375 × 667 |
750 × 1334 |
4.7寸 |
2 |
326 |
iPhone 6 Plus |
414 × 736 |
1080 × 1920 |
5.5寸 |
3 |
401 |
iPhone X |
375 × 812 |
1125 × 2436 |
5.8寸 |
3 |
458 |
iPhoneXR |
414 × 896 |
828 × 1792 |
6.1寸 |
2 |
326 |
iPhoneXS Max |
414 × 896 |
1242 × 2688 |
6.5寸 |
3 |
458 |
三、Viewport
1、Viewport 到底是什么?
我们在写H5页面的时候,通常会在 html 的 head 中加入下面这句话:
这句话就是在设置页面的 viewport 。那 viewport 到底是什么?为什么要设置它?
简单来说:viewport 是屏幕背后的一张画布。
下面,我们将逐个理解 viewport 中的每个概念。
2、Viewport 画布
浏览器会先把页面内容绘制到画布上,然后再通过屏幕窗口呈现出来。
画布的宽度可大可小, 当画布的宽度大于屏幕宽度时,画布上的内容就无法通过屏幕全部展示出来,用户可以通过屏幕手势来拖动画布查看被遮挡的部分。
如果没有在 html 中加 viewport 的设置,画布其实也是存在的,浏览器会给画布设置一个默认宽度 ,不同平台的默认值如下:
画布的宽度可以通过 DOM API 来获取:
3、device-width 指的是什么?
device-width 指屏幕可视窗口在水平方向上的逻辑像素。
device-width 的大小可以通过 window.screen.width 来获取:
4、width=device-width 在设置谁的宽度?
width 指的是画布的宽度,device-width 是可视窗口宽度。
width=device-width 就是把画布的宽度设置为可视窗口的宽度,让画布上的内容完全呈现出来。
设置了 width=device-width 之后,画布的宽度就和屏幕的宽度一样大了。
5、画布缩放 scale
scale 是指画布以 device-width 大小为基准的缩放值。
initial-scale=1.0 也就相当于设置了 width=device-width
通常需要同时设置这两个值,这是因为两者在不同平台有兼容性问题:
在iPhone 和 iPad 上,只支持 inital-scale=1 的设置,而在 IE 只支持 width=device-width ,所以两者同时设置,可以兼容所有的平台。
6、动态缩放机制
在没有给页面设置 viewport 的情况下,当画布宽度大于可视窗口的时候,浏览器会自动对画布进行缩放,以适配可视窗口大小。这样页面在不滚动的情况下也能呈现全部内容。
下面这个页面是PC端页面,没有做移动端适配,可以看出网页的内容依然可以完全呈现出来,这是因为没有设置 viewport 而触发了 画布的动态缩放机制。
通过 DOM API 能计算出浏览器确实对画布进行了缩放:
需要注意的是:
当没有设置 viewport 或者 设置了viewport 但没有设置 scale 的时候,才会触发浏览器动态缩放机制。
7、禁止动态缩放
给页面添加 viewport 设置,如下所示:
由于手动设置了 scale 的值,没有触发自动缩放机制,浏览器直接把宽度为 980px 的画布原封不动的展示出来了:
这种情况下需要通过滚动才能查看画布全部内容。
8、三个 Viewport
通常,我们把画布称为 layout viewport, 把屏幕可视窗口称为 visual viewport。
而把设置 width=device-width 的画布称为 ideal viewport,即“理想视口”。
我们通常在 html 中设置 viewport 就是为了得到理想视口,方便用户阅览。
四、响应式布局方案
响应式布局的目标是:用同一套代码适配所有的设备。
常用的布局方案有以下几种:
-
百分比
-
vw
-
Css Media Query
-
rem
-
flex box
下面是手淘团队移动端适配的协作模式:
设计师一般会把 iPhone6(750px) 作为设计稿,设计稿中的元素也都是基于750px进行标注的,当然这里的 px 指的是物理像素。
开发拿到设计稿后,根据iPhone6的 dpr 把标注中的元素大小换算成 css 中的大小,比如设计稿中按钮的宽度标注为40px, 则 css 中应该写成40/2=20px
然后再根据屏幕的逻辑宽度进行同步缩放(如:rem/vw 方案),就可以实现向上或向下适配所有设备。
五、总结
最后,我们再回顾一下开篇提到的问题,其实不难理解,这是由于屏幕的 dpr 不同导致的。
一般情况下,PC 屏幕 dpr 是 1,即 1个逻辑像素 = 1个物理像素,而移动端的 dpr 通常都是 2 或 3,因此也就需要 2个或 3个物理像素来渲染。
这也是 “移动端1px边框” 的经典问题,理解了 viewport,这个问题就不难解决了。
原创发布 @一像素 2020.01.03