十多年前创建网站和应用程序时，甚至没有人想到移动Web应用程序。好的屏幕充其量是全高清，很少有人会使用24英寸或27英寸的屏幕尺寸。
今天，情况有很大的不同。与几年前相比，有各种手持设备，其中大多数具有更高的分辨率。
设备屏幕已经发展，分辨率增加了，不仅如此，而且您现在还拥有宽屏幕，弯曲的屏幕和对角线尺寸超过40英寸。这一切都带有一套新的可能性，但也带来了开发人员和测试人员需要解决的新问题。设备破碎化的增加越多，需要创建一个响应式的网络设计，该设计将在不同的分辨率上正确渲染。
在本指南中，您将发现最佳的响应网络设计挑战及其解决方案。
视口
视口是用户的可见区域。与台式机相比
早期的网页仅从桌面上消费。然后，人们开始使用平板电脑和手机冲浪。此时，固定尺寸的网页太大了，无法适合视口。要解决此问题，请在这些设备上浏览整个网页以适合屏幕。
在HTML中的视口标签的帮助下，可以控制视口参数，例如高度，宽度，比例和分辨率。
使用META标签对于匹配页面兼容性与设备屏幕至关重要。设计页面时，设计人员根据视口可以处理的内容来列出页面中的元素。
没有此元标记的情况是，该设备在实际的，更高的分辨率上呈现，然后尝试通过缩放将其放入小得多的移动浏览器中。这会导致设计破裂，并且出现的东西被缩放。通过添加此META标签，您可以说您想在此较小的浏览器视口中渲染它，然后可以通过CSS中的媒体查询来定位。
这是元标签的示例。
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
媒体查询
CSS中的媒体查询用于将CSS规则应用于特定目标。与它们一起，您可以根据屏幕宽度调整尺寸。但是要在移动设备上使用，您需要使用先前规定的元标记。
您可以尝试通过这些查询将每个设备分开定位，但这太困难了，可悲的是，没有固定的分辨率大小可用于移动或桌面版本。您唯一可以做的就是研究，并找出大多数用户使用的设备。
Browserstack已编译了全球用户经常使用的设备列表。必须识别和test on the right devices。
现在，您通常希望拥有两个或三个不同的类别，并尝试针对台式机，移动和平板电脑。确定设备目标后，您需要识别和定义responsive design breakpoint4。
其他测试工具
完成应用程序设计后，您就可以实现它。您确实想确保一切仍然按预期运行。这需要在不同的浏览器，操作系统和屏幕尺寸上进行大量测试。一种方法是使用浏览器检查器工具，该工具通常通过使用F12键打开。但是，它们仅配备了一些内置的屏幕和互联网速度版本。如果您想要开箱即用的所有内容，则可以将Browserstack Live考虑。使用它，不仅可以以不同的互联网速度来测试应用程序行为，还可以在不同的分辨率和操作系统中与Android V2一样旧，以及Windows 11。
。结论
如果您打开了本文，希望有一个银色的子弹解决方案，我很抱歉让您失望。哪有这回事。如今，唯一的共识是首先设计用于移动设备，并针对桌面进行调整。但最重要的是，谁在使用您的应用程序，以及如何使用。如果您的应用程序被用作公司软件，其中90％或更多用户可以通过公司笔记本电脑访问它，则首先为桌面构建它是合乎逻辑的。您仍然需要在他们的屏幕上进行适当的研究。之后，您可以使用上述方法对其进行正确构建并实施。