如何测试响应式网站设计跨浏览器兼容性？
时间：2024-05-19 23:30:01 | 来源：建站知识
时间：2024-05-19 23:30:01 来源：建站知识
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 src="portrait.jpg" 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可能比移动设备具有更快的网络和处理速度。
移动操作系统模拟器 在设备上运行Android或iOS虚拟机可让您安装和运行真正的移动浏览器并使用其实际渲染引擎。
Android模拟器包括：
- Genymotion：免费和商业，适用于Windows，macOS和Linux的所有Android版本
- Android Studio：免费，Windows，macOS和Linux
- Visual Studio Xamarin：商业，Windows和macOS
- Bliss OS：免费，适用于Windows，Linux和Chrome OS的Android 9
- Phoenix OS：免费，适用于Windows和macOS的Android 7.1或5.1
- Android-x86：适用于任何虚拟机平台的免费Android ISO。
Chrome是Android上明显的浏览器选择，但您也可以安装Opera Mini，这在低功率功能手机上很显眼。
iOS的选项更为有限：
- Apple Xcode：商业，macOS
- Electric Mobile Studio：商业，Windows
- iPadian模拟器：商业，Windows
这些仿真器仍有缺点：
- 该软件需要一定的技术知识，并占用大量系统资源。
- 许多iOS选项都是模拟器。它们会改用其他渲染引擎，并且不一定总是准确的。
在线测试服务 几种在线服务使您可以通过Web在移动浏览器上测试响应页面。本质上，您在真实设备上租用时间，并且可以在浏览器中查看其屏幕。没有要设置或维护的软件。
除实时测试外，某些服务还包括自动测试API，使您可以运行脚本并检查样式回归或损坏的用户界面。
LambdaTest提供了2,000多种设备，操作系统和浏览器的组合。功能包括：
- 测试localhost开发PC上运行的页面
- 使用集成的开发人员工具进行调试
- 来自不同位置的地理位置测试
- 在多个设备上自动生成的全屏屏幕截图
- 内置的问题跟踪器
- LT浏览器软件（Windows，macOS，Linux）通过自动重新加载和滚动同步来测试和比较设备
- 基于硒的自动化测试API
- 24/7支持
真实设备测试 最后，没有替代品可以在真实设备上进行测试。这是评估实际处理速度，触摸控制和网站的自适应网页设计的最佳方法。
理想情况下，您应该测试尽可能多的设备，但是您自己的最新智能手机可能并不代表平均硬件水平。尝试获得一两年之久的中档设备，例如二手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上调试网站。
一个站点，多个视图 响应式网页设计技术使您可以创建一个网站，无论技术限制和边界如何，任何人都可以在任何设备上查看该网站。使其具有出色的用户体验是另一回事，但是测试工具的范围和功能仍在不断提高。
在线咨询
