Responsive Web测试

什么是Responsive Web设计

Ethan Marcotte曾于2010年5月25日在A List Apart发表了文章《Responsive Web Design》，首次提出了RWD(Responsive Web Design)的概念。其理念是，Web页面的设计能够自适应多种设备、平台和浏览器，同时减少缩放、平移和滚动。

Responsive Web测试

RWD概念提倡“一次设计，普遍适用”。让同一个网页设计自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局。

对用户来讲，无论正在使用电脑、平板、还是手机，Web页面都应该能够自动切换分辨率和图片尺寸等。这样，用户不仅能够在不同设备上看到同样的网页，还能够免去频繁拖动和缩放屏幕等操作。
对设计师来讲，只需要采用同一套控件和界面标准，就能完成PC和移动端的设计。
对开发者来讲，只需要开发和维护一套代码，网站就能在“多个”平台上工作，这大大减少了架构设计的复杂度。

几个关于屏幕的概念

(1). 屏幕尺寸 是指手机屏幕对角线的物理尺寸。单位：英寸（inch），1英寸=2.54cm。

(2). 屏幕分辨率 是指手机在横向（宽度）、纵向（高度）上的像素块的总和，单位：px（pixel），1px=1像素点。一般描述成屏幕的"宽x高”=AxB，也就是说屏幕在宽度上有A个像素点，在高度有B个像素点。

在我们手机上呈现的一条线、一个面、一张图像都是由最小的单位像素来表示的，可以简单理解为是由一个个小方块组成的。

(3). 分辨率比 即屏幕分辨率的宽高比。比如iPhoneX分别率为：1080*1920 (px)，分辨率比就是9:16。

(4). 屏幕像素密度 指每英寸的像素点数，英文简称PPI，单位：dpi（dots per ich）。比如设备内每英寸有160个像素，那么该设备的屏幕像素密度=160dpi。这个英寸跟手机屏幕尺寸一样，也是对角线的长度。所以屏幕像素密度，可以理解为一个对角线长度为1英寸的正方形内所拥有的像素数。

(5). 屏幕尺寸、屏幕分辨率、像素密度三者关系：屏幕尺寸一样的情况下，分辨率越高，屏幕像素密度就越高，显示效果就越精细。

密度等级	屏幕分辨率 (px)	像素密度 (dpi)
低密度（ldpi）	240x320	120
中密度（mdpi）	320x480	160
高密度（hdpi）	480x800	240
极高密度（xhdpi）	720x1280	320
超高密度（xxhdpi）	1080x1920	480

Responsive Web测试测什么

首先来对比一下静态布局和Responsive布局：

静态式布局：窗口缩小后内容被遮挡时，拖动滚动条显示布局。不管在哪种设备，哪种浏览器上浏览都是一个样。移动设备上则显示太小或不全。
Responsive布局：分别为不同屏幕分辨率设备设计不同的布局布局，即页面元素宽度随着窗口调整而自动适配，元素位置、大小都会随之改变。显示效果和交互方式都会发生变化各不相同

因此，Responsive Web测试要关注以下几点：

布局调整：网页能够自动识别屏幕宽度调整布局，不需要横向滚动。比如：页面横向上有两个并排的元素，如果宽度太小，放不下两个元素，第二个元素会自动显示到第一个元素的下方，不会在水平方向溢出，从而避免了水平滚动。
文字缩放和换行：网页能够自动识别屏幕宽度调整文字大小并换行。
图像缩放：网页能够自动识别屏幕宽度对图片进行缩放，使其不需要放大缩小就能显示完全。
显示效果和交互方式可能发生改变：网页的交互方式和显示效果也可能发生变化。比如，在PC端，一个下拉列表是以Dropdown形式呈现，但在移动端变成右侧划出的菜单。当然交互方式和显示效果是否发生变化，取决于设计。
屏幕旋转：当旋转屏幕时，布局、文字、图像和交互可能发生改变。
移动端的键盘：对于移动平台，要关注键盘弹出时样式是否正常。