- A+
如何测试响应式网站设计的跨浏览器兼容性？
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>：
<metaname="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 --><sourcesrcset="landscape.jpg"media="(min-aspect-ratio:1/1)"alt="landscape"/><!-- default image --><imgsrc="portrait.jpg" alt="浏览器兼容性测试报告（浏览器兼容性测试方法）"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: 12remauto; column-gap: 2rem; }
CSS Flexbox和网格
CSS Flexbox和CSS Grid提供了现代技术，可根据子元素的内容和可用空间对子元素进行布局。主要区别：
可以用来创建内部布局。本质上，无需视媒体查询即可根据视口尺寸调整元素的大小。例如：
.grid-container{ display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); grid-gap: 1rem; }
JavaScript RWD选项
JavaScript也可以用于确定视口尺寸并做出相应的反应。例如：
// get viewport width and heightconstvw = window.innerWidth, vh = window.innerHeight;
类似地，尽管getBoundingClientRect（）方法可以返回更多信息，包括像素的分数，但是可以使用offsetWidth和offsetHeight检查单个元素的尺寸：
constelement= document.getElementById('myelement'),rect= element.getBoundingClientRect(),ew= rect.width,eh= rect.height;
窗口和元素的尺寸可以随着设备旋转或调整浏览器窗口的大小而改变。该matchMediaAPI可以解析CSS媒体查询并触发更改事件：
// media queryconstmql = window.matchMedia('(min-width: 600px)'); // initial check mqTest(mql); // call mqTest when media query changes mql.addListener(mqTest); // media query testing function functionmqTest(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中，从浏览器“偏好设置”的“高级”标签中启用“在菜单栏中显示开发菜单”选项。加载页面，然后从“开发”菜单中选择“进入响应设计模式” 。
但是，请注意，这些工具仅模仿设备的屏幕尺寸和用户代理。他们无法准确模拟以下内容：
移动操作系统模拟器
在设备上运行Android或iOS虚拟机可让您安装和运行真正的移动浏览器并使用其实际渲染引擎。
Android模拟器包括：
Chrome是Android上明显的浏览器选择，但您也可以安装Opera Mini，这在低功率功能手机上很显眼。
iOS的选项更为有限：
这些仿真器仍有缺点：
在线测试服务
几种在线服务使您可以通过Web在移动浏览器上测试响应页面。本质上，您在真实设备上租用时间，并且可以在浏览器中查看其屏幕。没有要设置或维护的软件。
除实时测试外，某些服务还包括自动测试API，使您可以运行脚本并检查样式回归或损坏的用户界面。
LambdaTest提供了2,000多种设备，操作系统和浏览器的组合。功能包括：
真实设备测试
最后，没有替代品可以在真实设备上进行测试。这是评估实际处理速度，触摸控制和网站的自适应网页设计的最佳方法。
理想情况下，您应该测试尽可能多的设备，但是您自己的最新智能手机可能并不代表平均硬件水平。尝试获得一两年之久的中档设备，例如二手Moto G7或iPhone 8。
在同一网络上的设备可以通过在浏览器中输入PC的IP地址来访问PC的服务器。这可以ifconfig在macOS和Linux或ipconfigWindows上获得。
您也可以使用USB电缆将智能手机连接到PC。这使您可以远程控制设备并轻松访问其开发人员工具面板以进行调试。该技术因平台而异，但是要在桌面版浏览器上调试Android Chrome，请执行以下操作：
- 在Android设备上，从设置中选择开发者选项，然后启用USB调试。
- 使用适当的USB电缆将设备连接到计算机。首次尝试执行此操作时，系统可能会提示您确认一个或两个设备上的操作。
- 在您的PC上启动Chrome并打开 在新标签页中。确保启用“发现USB设备”。
- （可选）设置端口转发-例如，8888可以将远程设备上的端口转发到localhost:8888。
- 您的设备应出现在列表中。现在，您可以检查新的或现有的标签，该标签会打开设备的开发人员工具。
要调试iPhone的Safari，请执行以下操作：
- 将手机连接到Apple计算机。
- 在您的iPhone的Safari中打开要调试的网页。
- 在计算机上启动Safari。
- 在计算机上的Safari中，转到开发> [您的iPhone]> [要检查的网站]。这将在您的计算机上打开Safari的开发人员工具，使您可以在iPhone上调试网站。
一个站点，多个视图
响应式网页设计技术使您可以创建一个网站，无论技术限制和边界如何，任何人都可以在任何设备上查看该网站。使其具有出色的用户体验是另一回事，但是测试工具的范围和功能仍在不断提高。
6种优秀的浏览器兼容性测试工具
在许多谈及网站或Web应用开发的场合，开发人员最为关心的莫过于跨浏览器的兼容性问题，因为跨浏览器兼容性测试是Web应用或网站开发中最为关键的一个环节。今天小编就给大家介绍目前流行的、面向开发人员的6种浏览器兼容性测试工具。
1、LambdaTest
作为一款基于云的自动化跨浏览器测试平台，LambdaTest提供了2000多种浏览器和操作系统的组合，以方便测试Web应用程序。它可以让基于云的selenium grid上执行自动化的selenium脚本，并针对网页进行各种实时的交互式测试。LambdaTest能够提供自动化测试、实时测试、响应式测试、屏幕截图测试、以及可视化测试。如果在测试Web应用或网站时遇到任何技术问题，LambdaTest都能提供24x7的全天候支持。可以说，它是最为常见的跨浏览器测试工具之一。
2、Browserstack
作为浏览器测试市场上最古老的工具之一，Browserstack仍然被Microsoft、jQuery、Airbnb、以及Wikipedia等知名企业所延用着。它是一款基于Web的实时浏览器测试工具。Browserstack使用各种开发工具，来提供对于虚拟机的即时访问。这使得开发人员能够轻松地开展Web应用相关测试，以及本地安全性测试。
3、Browsershots
作为一款完全免费的开源的在线跨浏览器测试平台，Browsershots主要致力于捕获浏览器中的屏幕截图。Browsershots背后的理念是：允许个人贡献出自己的计算机处理能力。也就是说，作为一款基于队列的工具，它能够将用户在网页地址栏里输入的URL，传递到不同地域的分布式计算机系统中进行测试。
4、Sauce Labs
Sauce Labs是一款基于云的跨浏览器测试平台，能够为企业和开源开发团队提供服务。它能够为800多种浏览器和移动设备，提供Web和移动应用程序的手动及自动化测试。此外，它还能够与JS Unit、Selenium、Appium等新技术相集成，提供更宽广的测试范围，以及更快速且更稳定的测试服务。
5、Browser Sandbox
由turbo.net带来的Browser Sandbox具有测试网络浏览器方面的独特方法。它是基于Web的容器平台，能够在任何Windows桌面系统上快速地运行那些基于桌面端、以及基于服务器端的应用程序。
6、Browserling
Browserling是由Peteris Krumins和James Halliday于2010年推出的实时交互式跨浏览器测试工具。它旨在几秒钟内测试完整个网站或Web应用。如今，它正在被Teespring、NHS、Blekko、以及Coderwall等大公司所广泛使用。您可以通过屏幕截图的方式，捕获浏览器中的网页信息，并共享给他人。与前面的Browserstack类似，它可以让您连接到远程真实的计算机与浏览器上，开展各种“本地化”的测试工作。
- 我的微信公众号
- 扫一扫关注
-
- 我的新浪微博号
- 扫一扫关注
-
- 版权声明：本站信息来自网络收集整理，版权争议与本站无关，于2023年3月8日18:59:49，由 小辉博客 发表，共 6343 字。
- 转载请注明：浏览器兼容性测试报告（浏览器兼容性测试方法） | 小辉博客 百度已收录
