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

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

<图片>元素

HTML<图片>元素使用媒体查询语法来控制从所选的图像中显示哪个图像源> <选项。这通常用于美术指导，以便为设备视口显示合适的图像。例如:

<图片><！——视口宽度大于高度时显示的图像——><源srcset＝＂landscape.jpg＂媒体＝＂(min-aspect-ratio: 1/1)＂alt＝＂景观＂/><！——默认镜像——><imgsrc＝＂portrait.jpg＂alt＝＂肖像＂/>图片>

CSS视口单元

的大众而且vhCSS单元分别代表视口宽度和高度的1%。vmin1%是最小维数吗vmax是最大维数的1%

这使得RWD具有灵活性，特别是与calc．例如:

/*字体大小随视口宽度*/而增加p｛字体大小：1快速眼动+0．5大众；｝

CSS列

CSS Flexbox和网格

都可以用来创建内在的布局（<一个href="https://aneventapart.com/news/post/designing-intrinsic-layouts-aea-video">这个术语是珍·西蒙斯发明的）．本质上，元素的大小是根据视口的尺寸，而不需要媒体查询。例如:

/*子元素至少为20rem，并填充一行。小于20rem的显示器的元素大小为1fr(可用宽度的100%)。元素周围总是有1雷姆的间隙。* /.grid-container｛显示：网格；grid-template-columns：重复（auto-fit，极大极小（20.快速眼动，1fr））；grid-gap：1快速眼动；｝

JavaScript RWD选项

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

//获取viewport的宽度和高度常量大众＝窗口．innerWidth，vh＝窗口．innerHeight；

类似地，单个元素的尺寸可以用<一个href="https://developer.mozilla.org/Web/API/HTMLElement/offsetWidth">offsetWidth而且<一个href="https://developer.mozilla.org/Web/API/HTMLElement/offsetHeight">offsetHeight，虽然<一个href="https://developer.mozilla.orgWeb/API/Element/getBoundingClientRect">getBoundingClientRect()方法可以返回更多信息，包括一个像素的分数:

常量元素＝文档．getElementById（“myelement”），矩形＝元素．getBoundingClientRect（），电子战＝矩形．宽度，嗯＝矩形．高度；

窗口和元素的尺寸可以随着设备的旋转或浏览器窗口的调整而改变。的<一个href="https://developer.mozilla.org/Web/API/Window/matchMedia">matchMediaAPI可以解析CSS媒体查询和<一个href="https://developer.mozilla.org/Web/API/MediaQueryList/addListener">触发变更事件：

//媒体查询常量mql＝窗口．matchMedia（“(min-width: 600 px)”）；//初始检查mqt（mql）；//当媒体查询发生变化时调用mqTestmql．addListener（mqt）；//媒体查询测试功能函数mqt（e）｛如果（e．匹配）｛控制台．日志（'视口宽度至少为600px '）；｝其他的｛控制台．日志（'视口宽度小于600px '）；｝｝

浏览器支持

RWD技术首先提供了良好的浏览器支持。最新的选项- CSS Grid -是<一个href="https://caniuse.com/">目前几乎95%的浏览器都支持．然而，仍然有必要在一系列设备、分辨率和浏览器上测试你的网站……

浏览器测试

调整浏览器窗口的大小是一个合理的测试策略，可以持续几个小时，但很快就会变得不准确和麻烦。大多数浏览器都提供响应式设计模式它允许你选择一个设备和用户代理，旋转它，选择分辨率，改变像素密度，节流带宽，模拟触摸和截屏。

在Firefox中，选择响应式设计模式从Web开发人员菜单或按Ctrl|Cmd+转变+米：

在基于chromium的浏览器中，打开开发人员工具从更多的工具菜单或按Ctrl|Cmd+转变+我．然后按切换设备工具栏图标:

切换回浏览器选项卡查看调整后的站点:

在Safari中，启用在菜单栏显示“开发”菜单选项。先进的浏览器选项卡首选项．加载一个页面并选择进入响应式设计模式从开发菜单。

但是，请注意，这些工具只是模仿设备的屏幕尺寸和用户代理。它们无法准确地模拟以下情况:

• 渲染能力

  浏览器将使用它自己的渲染引擎——而不是模拟设备的渲染引擎。在Firefox中工作的CSS功能将在其模拟的iPhone视图上“工作”，而不管实际支持如何。也就是说，Chrome桌面将显示与Android Chrome的合理近似，而macOS Safari将类似于iPhone，因为它们基于相同的渲染引擎。

• 旧设备

  在最新版本的Safari上测试iPhone浏览器视图不能准确地代表带有旧操作系统和软件的旧设备。

• 高密度显示

  您只能使用PC显示器的物理像素，因此网站在实际设备上可能看起来更好，也可能更差。

• 触摸

  鼠标或触控板比屏幕较小的触屏设备具有更好的控制能力。在悬停时可能无法查看应用的效果。

• 处理速度

  你的个人电脑可能比移动设备有更快的网络和处理速度。

移动操作系统模拟器

在你的设备上运行Android或iOS虚拟机可以让你安装和运行真正的移动浏览器，并使用它们实际的渲染引擎。

Android模拟器包括:

Chrome显然是Android浏览器的首选，但你也可以安装<一个href="https://play.google.com/store/apps/details?id=com.opera.mini.native">Opera Mini这在功率较低的功能手机上尤为突出。

iOS平台的选择更为有限:

这些模拟器仍然有缺点:

• 该软件需要一些专业技术知识，并使用相当多的系统资源。
• 许多iOS选项包括模拟器．他们采用另一个渲染引擎，并不总是准确的。

在线测试服务

这个部分是与<一个href="https://www.lambdatest.com/" rel="sponsored">LambdaTest．感谢您对合作伙伴的支持，是他们让SitePoint成为可能。必威西盟体育网页登录

一些在线服务允许您通过Web在移动浏览器上测试响应性页面。从本质上讲，你租用了一台真实设备的时间，并可以在浏览器中查看它的屏幕。不需要安装或维护软件。

除了实时测试，一些服务还包括自动测试api，允许您运行脚本并检查样式回归或损坏的用户界面。

真实设备测试

最后，在真实设备上进行测试是不可替代的。这是评估实际处理速度、触摸控制和网站响应性设计的最佳方法。

理想情况下，你应该测试尽可能多的设备，但你自己最近的智能手机可能并不代表平均硬件。尽量购买使用了一两年的中档手机，比如二手Moto G7或iPhone 8。

同一网络上的设备可以通过在浏览器中输入IP地址访问您PC的服务器。这可以通过ifconfig在macOS和Linux上ipconfig在Windows上。

你也可以用USB线把智能手机和电脑连接起来。这允许您远程控制设备，并轻松访问其开发人员工具面板进行调试。不同平台的技术不同，但要在桌面版浏览器上调试Android Chrome:

1. 在Android设备上，选择开发人员选项从设置并使USB调试．
2. 使用适当的USB电缆将设备连接到计算机。第一次尝试时，系统可能会提示您确认一台或两台设备上的操作。
3. 在你的电脑上启动Chrome浏览器并打开在一个新的标签。确保发现USB设备启用。
4. 可选地,设置端口转发—例如，port8888可以转发到远端设备上localhost: 8888．
5. 您的设备应该出现在列表中。您现在可以检查一个新的或现有的选项卡，打开设备的开发工具:

要调试Safari for iPhone，请执行以下操作:

1. 将你的手机连接到你的苹果电脑上。
2. 在iPhone的Safari中打开要调试的网页。
3. 在你的电脑上启动Safari。
4. 在电脑的Safari浏览器中，转到开发>(你的iPhone)>[要检查的网站]．这将在您的计算机上打开Safari的开发工具，允许您在iPhone上调试站点。

一个站点，多个视图

响应式网页设计技术允许您创建一个单一的网站，可以被任何人在任何设备上查看，而不受技术限制和边界。使其具有良好的用户体验是另一回事，但是测试工具的范围和功能在不断改进。