创建Wordpress网站的移动版本

Question

我们有一个专为台式机开发的网站，现在我很荣幸能够创建它的移动版本。 移动设计可能与台式机版本完全不同，并且网站基于Wordpress构建。 现在我不确定什么是最好的方法：

1. 我应该只坚持CSS更改（尽可能多）并使用媒体查询来定位较小的屏幕吗？ 我担心即使显示为“大”也无法下载大图像。 每个页面上也有很多JS发生，并且该JS不会在网站的移动版本中使用，因此我可能必须进行其他检查，等等。这种方法还有其他可能的问题吗？

2. 服务器端代码应检测其移动浏览器，并应返回自定义html？ 此方法还有其他可能的问题吗？

3. 以上两种的混合物？

4. 还有其他选择吗？

如果有人在类似项目上有经验，并且可以指出解决方案，那将是很棒的。

Answer 1

我是Wordpress响应主题的忠实拥护者。 它是非常可定制的，将允许您将一个站点同时用于移动和桌面。

https://wordpress.org/themes/responsive

Answer 2

尽可能使用媒体查询来更改布局。 为您的JS创建一个小的断点处理程序，该处理程序将触发js运行或停止。

我认为很多人没有意识到压缩的2倍图像小于压缩的1倍图像。 因此，如果对图像使用压缩，则仅使用大图像实际上会获得更好的网络性能。 显示多少图像是一个可能导致性能下降的潜在问题，但我认为这并不重要。

您在移动设备上使用的UI与在桌面设备上使用的UI完全不同，还是元素的定位不同？ 如果必须支持两个模板，则需要考虑Adaptive（服务器响应），服务器将根据UserAgent确定将哪个模板发送给客户端。 除了客户端具有的浏览器类型外，UserAgent不会真正给您带来很多好处。 要弄清楚设备屏幕的尺寸，您需要知道尺寸或使用WURFL之类的服务。

如果您可以使用媒体查询在一个模板中完成所有UI更改，那么最好从Mobile First方法开始进行此工作，并且基本上从头开始了解网站的移动外观，然后弄清楚如何重新-将页面上的元素放置在尽可能接近当前桌面外观的位置。 使用自适应与自适应方法将消除对UserAgent检测的需要，并且您将仅使用设备的宽度。

在“移动”与“台式机”中对响应式的思考实际上是有局限性的，并且会引起一些混乱。 移动设备应指代更改位置的设备。 尝试使用小，中和大等名称来描述响应页面的布局（断点）。

最后，没有首选的方式来执行“响应式”。 每个站点都会有自己需要满足的要求。 您需要学习尽可能多的知识，并根据自己的需要创建首选的方式。

Answer 3

您可以随时使用：

 <meta name = "viewport" content = "width = device-width">

在您的标题中。 然后，整个站点将调整大小以适合移动设备。

您所有的js仍应可在移动设备上运行。 只是“闪光”而不会。

网站对此并不“响应”，但是根据网站以及访问者需要多少交互等，有时这是否足够简单？