.png)
.png)
新闻中心
充分考虑目标用户群体，精准分析行业市场需求，以目的为导向，支持多方案组合
邮箱： zyj@ejayer.cn
电话： 15867348620
如何测试响应式网页设计的跨浏览器兼容性?
发布日期：2022-01-06 编辑：奕捷网络
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 的一个典型例子是汉堡包菜单。屏幕较小的用户可以单击图标查看导航链接，而屏幕较大的用户可以在水平列表中看到所有选项。
以下部分提供了许多技术实施选项。
HTMLviewport元标记
无论采用哪种 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 弹性盒和网格
CSS Flexbox和CSS Grid提供了现代技术，可以根据子元素的内容和可用空间对其进行布局。主要区别：
Flexbox 用于一维布局。元素可以根据需要换行（或不换行）到下一行，因此列可能不会对齐。
网格用于二维布局，通常具有可识别的行和列。
两者均可用于创建内在布局。本质上，元素根据视口尺寸调整大小，无需媒体查询。例如：
/*
Child elements will be at least 20rem and fill the row.
Displays smaller than 20rem will have elements sized to 1fr
(100% of the available width).
A 1rem gap will always surround elements.
*/
.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;
类似地，可以使用offsetWidth和offsetHeight检查单个元素的尺寸，尽管getBoundingClientRect() 方法可以返回更多信息，包括像素的分数：
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 网格。但是，仍然有必要在各种设备、分辨率和浏览器上测试您的网站……
浏览器内测试
在几个小时内调整浏览器窗口大小是一个合理的测试策略，但它很快就会变得不准确和繁琐。大多数浏览器都提供响应式设计模式，允许您选择设备和用户代理、旋转它、选择分辨率、改变像素密度、节流带宽、模拟触摸和截屏。
一个站点，多个视图
响应式网页设计技术允许您创建一个网站，任何人都可以在任何设备上查看该网站，而不受技术限制和界限的限制。使其成为出色的用户体验是另一回事，但测试工具的范围和功能仍在不断改进。
立即获取方案报价，多一份参考，总有益处。
立即咨询
邮箱： zyj@ejayer.cn
电话： 15867348620
© 2022 宁波奕捷网络科技有限公司 All Rights Reserved. 备案号：浙ICP备20015208号-1