如何在不更改 URL 的情况下重定向到移动版网站？

Question

我正在尝试将我的移动用户和所有小型设备用户重定向到我的移动版本网站。但我不喜欢更改我的网址。就像下面的例子，

桌面版：domain.com（带有桌面版网站）

移动版本：domain.com（带有网站的移动版本）

Answer 1

重定向意味着改变窗口位置。

由于您不想拥有单独的移动网站，唯一可行的解决方案是使用良好的响应式 ui 框架，例如 bootstrap。但在你的标签中你提到了 WordPress，我觉得大多数 wp 主题实际上都是响应式的。

无论如何，如果您想设计响应式网站，请使用 bootstrap。或者另一种选择是使用媒体查询编写所有 css。希望有帮助。

Answer 2

您需要为此“即时”替换网站的主题。

你可以用代码来做，但它太长了，请改用这个插件设备主题切换器

Answer 3

两者的 UR 应该相同，并且它们的情况也相同。干得好！

现在，要自动渲染特定布局，请借助媒体查询。

参考

它们定义特定的宽度范围并仅选择那些特定的样式。

所以你有很多工作要做。

这是一种最佳的工作方式，称为响应式设计。

您可以找到

没有相同的教程。但要进行实验，只需使用一两个媒体查询即可。

此外，请阅读元标记，它可以选择样式表中编写的媒体查询https://css-tricks.com/snippets/html/responsive-meta-tag/

祝你好运！

Answer 4

在 WordPress 上自定义页面时，您可以在左下角看到您的网站在手机或平板电脑中的外观。

此外，一些页面构建器（例如 Elementor）允许您控制哪些部分显示在哪些屏幕上。

陈述您的问题的更好方法是，如何使页面响应？

当阅读有关

Grid Systems

的内容时，您会惊讶地发现，对 div 方向进行简单更改即可产生巨大的用户体验差异。当使用使用

Grid Systems

的框架时，

Bootstrap

是流行的框架之一，您可以想象任何屏幕分为 12 列（网格）。然后，您可以通过添加类来指定 div 在每个屏幕尺寸上占据多少部分。例如，

<div class = "col-sm-6 col-lg-3" </div>

将覆盖小屏幕（6 是 12 的一半）和四分之一大屏幕的屏幕（水平）。

这个过程背后的原因是消除左右滚动，这使得导航更容易。希望这能让您大致了解制作适合移动设备的网站所需的内容。祝你好运！

Answer 5

感谢大家对我的问题发表评论。现在我写下了自己的答案，我找到了问题的答案。

响应式设计不是答案。您必须显示网站的移动版本，而不是网站的响应版本。所以使用
@media()
没用。

对于这个问题，您必须在后端检测用户的设备。例如，在 PHP 中，您可以使用 mobile-detect。您可以检测您的设备并显示该设备的模板。

此外，移动检测还有js版本。点击这里希望您能在这里找到答案。

Answer 6

有点晚了，但其他人可能有同样的需求。如果您想为移动设备创建特定内容并具有相同的 URL，最简单的方法是使用插件针对移动设备的特定内容。

我知道我们在这里帮助编写代码，但在这种情况下，该插件是如此轻量级，以至于自定义代码甚至可能比其代码更重，并且它完全按照本文作者的要求进行操作。

如果您想避免使用插件，并希望使用自定义代码来实现，可以使用 WordPress 核心函数 wp_is_mobile() 来检查用户是否使用移动设备访问页面，然后替换内容与移动内容。无论如何，如果您想要相同的 URL，则需要确保为移动设备单独提供缓存。