现实世界中的响应式与自适应网站设计

mehedi67 · 发表于 2023-9-18 17:29:24

首先，我们有一个新的网站，所以请检查一下！它反应灵敏。并且适应性强。有时是动态的。自适应使我们能够解决一些重要问题，例如通过设备类型自定义用户体验并为更快的移动设备铺平道路地点。它还引入了新的复杂性，例如变化的响应标头（以及对缓存的潜在影响），以及在关键页面上维护的多个版本（对于动态内容）。我们将继续评估页面速度、缓存、转化率、排名等，并将随时更新我们的读者。 [/section] 大多数页面只是随着屏幕尺寸的变化而以不同的方式堆叠（响应式）。几乎所有页面都根据设备类型（自适应）来适应服务器端 JavaScript。其他人则使用专门针对移动访问者的单独代码库进行调整，使我们能够提供不同的内容或改变的用户体验（动态）。换句话说，下图的几乎每个部分都适用于我们的小网站（“移动子域/目录”除外）。在这篇文章中，我将解释这一切的含义，以及我们在构建和启动新网站时学到的有关自适应网站设计的一些知识。移动优化图。四个酒吧。中间的两个栏最高，然后是左边的栏，然后是右边的栏。左侧栏的标题为“通常推荐（所有设备的 URL 相同）”，并标记为“响应式（仅重新排列元素）”。

中间两栏的标题是“动态服务：在 HTTP 标头中使用 V A R Y（所有设备的 U R L 相同）”。左侧中间栏标记为“具有自适应逻辑的响应（通常通过 J S）”。右侧中间栏标记为“或单独的代码库”。右侧栏的标题为“总比没有好：使用 Rel 规范，使用 rel 替代（不同的 URL）”并标记为移动子域或移动目录。上图来自我们于 2015 年 1 月发布的一篇文章。从那以后，该文章中的建议并没有发生太大变化，但我们最终在我们自己的网站上实践了一些“自适应”内容。我们从第一手资料中了解到，定制的移动策略 英国电话号码清单 可能需要从每种方法中吸取点滴。例如：从技术上讲，整个网站都会响应不同的屏幕尺寸。所有这些意味着随着屏幕尺寸变小，页面元素应该调整大小并重新堆叠（在“流体网格”中）。响应式网页设计单一布局响应设备宽度。下面是通用网页设计的插图，计算机显示器、笔记本电脑、平板电脑和手机都根据设备的尺寸显示相同的设计。从技术上讲，整个网站也是自适应的，因为有一些小功能，例如将桌面标题中链接到我们的咨询页面的“安排通话”按钮变成移动设备上具有点击通话功能的“通话”按钮（更多自适应功能）下面讨论）。流入桌面和移动网站。 Inflow 桌面，在顶栏右侧有一个标有“安排通话”的按钮。

流入移动设备，在顶部栏的右上角有一个标记为“呼叫我们”的按钮。箭头从“安排通话”按钮指向“给我们打电话”按钮。文字说明：变为移动点击通话。根据设备类型动态更改 UX 和内容的示例。虽然我们的网站会在流体网格中进行调整以响应地处理屏幕尺寸，但某些页面也会动态调整以根据不同用户的设备类型向其显示不同的内容。这超出了上面使用 JavaScript 处理的按钮更改的范围，还涉及到一些需要单独代码库的动态功能。现实有点复杂虽然服务器端脚本负责站点范围内的自适应功能，例如更新标题和某些表单，但大多数页面都是作为响应式页面构建在 WordPress 后端中的。这包括所有博客文章。我的意思是，只有一个版本的帖子/页面需要编辑。这些将属于上图中的第二列（通过 JavaScript 进行自适应逻辑响应）。其他页面（例如我们的“服务”部分中的页面）是完全动态的，需要我们构建和维护两个版本的页面（一种用于桌面，一种用于移动）。例如，我们的电子商务 SEO 服务页面为移动用户加载的内容要少得多。我们正在使用 JavaScript 来适应移动设备的某些其他功能（例如按钮）。

		自动登录	找回密码
密码			立即注册