如何测试响应式网站设计跨浏览器兼容性？

Posted 2021-03-29 浪知潮网络

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何测试响应式网站设计跨浏览器兼容性？相关的知识，希望对你有一定的参考价值。

html是一种固有的流动媒介。文本和容器在水平和垂直方向上展开以使用可用空间。这种流动性使复杂的设计变得更加困难，因此在千禧年之初，许多站点都根据流行的屏幕尺寸采用了固定宽度。

随着屏幕尺寸从800×600增加到1024×768甚至更大，该过程仍然可行。但是，智能手机的兴起和2007年推出的iPhone扭转了这一趋势。如今，超过一半的用户在较小的移动设备上访问网页。

注意：从技术上讲，智能手机通常比许多显示器具有更高的分辨率，但是单个像素变得不可见。iPhone 11 Max将其2688 x 1242的硬件分辨率转换为更实用的896×414逻辑分辨率。每个逻辑像素映射到3×3实际像素的网格，这使字体更平滑并增加了图像细节。

最初的解决方法是两个站点：一个用于桌面，一个用于移动，通常需要侦听用户代理以进行重定向。随着各种设备呈指数增长，这很快变得不切实际。

最后，术语“响应式网页设计（RWD）”由Ethan Marcotte在2010年提出。该技术使同一个站点可以在任何设备上工作，而不管屏幕尺寸或视口尺寸如何。

RWD如何工作？

没有单一的RWD方法或技术。

首先，您必须确定站点设计如何对不同尺寸的显示器做出反应。这是一个挑战，许多首批RWD网站采用了现有的桌面布局，并随着屏幕尺寸的减小而删除了部分内容。

更好的技术是移动技术。它始于线性移动视图，可在所有设备上使用，然后随着更多空间和受支持的浏览器功能可用而重新排列或改编内容。最近，许多站点采用了更简单的布局，其中移动和桌面体验基本相似。

RWD的典型示例是汉堡菜单。屏幕较小的用户可以单击图标来查看导航链接，而屏幕较大的用户可以在水平列表中查看所有选项。

以下各节提供了许多技术实施选项。

HTML viewport元标记

无论采用哪种RWD技术，都必须在HTML中设置以下标记<head>：

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

该width=device-width设置可确保移动浏览器将逻辑CSS像素缩放到屏幕的宽度。否则，浏览器将假定它正在呈现一个桌面站点并相应地缩放它，以便可以对其进行平移和缩放。

媒体查询

媒体查询是第一个RWD网站的主要基础。它们允许CSS定位视口尺寸的特定范围。例如：

/* styles applied to all views */
p {font-size: 1rem;} 
/* styles applied to viewports with a width between 900px and 1200px */  
@media (min-width: 900px) and (max-width: 1200px) {
p {font-size: 1.5rem;}    
}

尽管现在可以使用不太明确的选项，但仍使用媒体查询。

<picture> 元素

HTML<picture>元素使用媒体查询语法从多个选项中控制显示哪个图像<source>。这通常用于艺术指导，以显示适合设备视口的图像。例如：

<picture>
<!-- image shown when viewport width is greater than the height -->
<source  srcset="landscape.jpg" media="(min-aspect-ratio:1/1)" alt="landscape" />
<!-- default image -->
<img  alt="portrait" />
</picture>

CSS视口单位

的vw和vhCSS单元分别表示视口的高度和宽度的1％。vmin是最小尺寸的vmax1％，是最大尺寸的1％。

这些允许RWD灵活性，特别是与结合使用时calc。例如：

/* font size increases with viewport width */  
p { font-size: 1rem + 0.5vw; }

CSS列

CSS多列布局提供了一种随着容器尺寸增加而创建多个文本列的方法。例如：

/*  columns must be a minimum width of 12rem  with a gap of 2rem between each  */  
.container {  columns: 12rem auto;    column-gap: 2rem;  }

CSS Flexbox和网格

CSS Flexbox和CSS Grid提供了现代技术，可根据子元素的内容和可用空间对子元素进行布局。主要区别：

Flexbox用于一维布局。元素可以根据需要包装（或不包装）到下一行，因此列可能不对齐。
网格用于二维布局，通常具有可识别的行和列。

可以用来创建内部布局。本质上，无需视媒体查询即可根据视口尺寸调整元素的大小。例如：

.grid-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	grid-gap: 1rem;
}

javascript RWD选项

JavaScript也可以用于确定视口尺寸并做出相应的反应。例如：

// get viewport width and height
const
vw = window.innerWidth,
vh = window.innerHeight;

类似地，尽管getBoundingClientRect（）方法可以返回更多信息，包括像素的分数，但是可以使用offsetWidth和offsetHeight检查单个元素的尺寸：

const 
element = document.getElementById('myelement'),
rect    = element.getBoundingClientRect(),
ew      = rect.width,
eh      = rect.height;

窗口和元素的尺寸可以随着设备旋转或调整浏览器窗口的大小而改变。该matchMediaAPI可以解析CSS媒体查询并触发更改事件：

// media query
const mql = window.matchMedia('(min-width: 600px)');
// initial check  
mqTest(mql);    
// call mqTest when media query changes  
mql.addListener(mqTest);    
// media query testing function  
function mqTest(e) {
      if (e.matches) {
      console.log('viewport is at least 600px width');
	   }
	   else {
      console.log('viewport is less than 600px width');
	   }
}

浏览器支持

首先，RWD技术提供了良好的浏览器支持。当前使用的最新浏览器中，有近95％支持最新的CSS网格选项。但是，仍然有必要在各种设备，分辨率和浏览器上测试您的网站……

浏览器内测试

调整浏览器窗口的大小是几个小时的合理测试策略，但是它很快变得不准确且麻烦。大多数浏览器都提供了响应式设计模式，使您可以选择设备和用户代理，对其进行旋转，选择分辨率，更改像素密度，调节带宽，模拟触摸并拍摄屏幕截图。

在Firefox中，从Web Developer菜单中选择“响应式设计模式”或按Ctrl|Cmd+Shift+M。

在基于Chromium的浏览器中，从“更多工具”菜单中打开“开发者”工具，或按Ctrl|Cmd+Shift+I，然后单击切换设备工具栏图标，切换回浏览器选项卡以查看调整大小的站点。

在Safari中，从浏览器“偏好设置”的“高级”标签中启用“在菜单栏中显示开发菜单”选项。加载页面，然后从“开发”菜单中选择“进入响应设计模式” 。

但是，请注意，这些工具仅模仿设备的屏幕尺寸和用户代理。他们无法准确模拟以下内容：

渲染能力
浏览器将使用其自己的呈现引擎-而不是模拟设备的呈现引擎。Firefox的CSS功能可以在其模拟的iPhone视图上“工作”，而无需实际支持。也就是说，Chrome桌面将显示出与android Chrome相当的近似值，而macOS Safari将类似于iPhone，因为它们基于相同的渲染引擎。
较旧的设备
在最新版本的Safari上测试iPhone浏览器视图无法正确表示具有旧版操作系统和软件的旧设备。
高密度显示器
您仅限于PC显示器的物理像素，因此，在实际设备上，网站看起来可能会更好或更糟。
触摸
与具有小显示屏的触摸屏设备相比，鼠标或触控板具有更好的控制。可能无法查看悬停效果。
处理速度
您的PC可能比移动设备具有更快的网络和处理速度。