创建Wordpress站点的移动版本

时间:2014-02-12 00:48:34

标签: javascript html css wordpress

我们有为桌面开发的网站,现在我有幸创建了它的移动版本。移动设计可能与桌面版本完全不同,网站建立在Wordpress上。现在我不确定什么是最好的方法:

  1. 我应该只针对CSS更改(尽可能多)并使用媒体查询来定位较小的屏幕吗?我担心仍然会下载大图像,即使它们是显示的:无。在每个页面上都会发生相当多的JS,并且这个JS不会在网站的移动版本中使用,因此我可能需要进行额外的检查等等。这种方法还有其他任何可能出现的问题吗?

    < / LI>
  2. 服务器端代码应检测其移动浏览器是否应返回自定义html?这种方法还有其他任何可能出现的问题吗?

  3. 以上两种混合物?

  4. 任何其他选项?

  5. 如果有人有类似项目的经验,并且可以指出哪些提供的解决方案会很棒。

3 个答案:

答案 0 :(得分:0)

我是Wordpress的响应主题的忠实粉丝。它非常可定制,允许您将一个站点用于移动和桌面。

https://wordpress.org/themes/responsive

答案 1 :(得分:0)

尽可能使用媒体查询进行布局更改。 对于JS,创建一个小的断点处理程序,它将触发js运行或停止。

我认为很多人没有意识到压缩的2x图像比压缩的1x图像小。因此,如果您对图像使用压缩,实际上只使用大图像就可以获得更好的网络性能。显示多少图像是一个可能导致负面表现的潜在问题,但我认为这是无关紧要的。

您是使用完全不同的移动设备用户界面而不是桌面用户界面,还是只是元素的不同定位?如果您必须支持两个模板,那么您将需要考虑Adaptive(从服务器响应),服务器将根据UserAgent确定要发送给客户端的模板。除了客户端拥有的浏览器类型之外,UserAgent不会让您受到太多帮助。要弄清楚设备屏幕的尺寸,您需要知道尺寸或使用像WURFL这样的服务。

如果你可以使用媒体查询在一个模板中完成所有的UI更改,那么最好从Mobile First方法开始处理这个问题,并且基本上从头开始在网站的移动外观上然后弄清楚如何您可以重新定位页面上的元素,以尽可能接近当前桌面外观。使用响应式与自适应式方法将消除对UserAgent检测的需求,您只能使用设备的宽度。

在“移动”与“桌面”中思考响应是真正的限制并引起一些混乱。移动应该指的是改变位置的设备。尝试使用小,中,大等名称来描述响应页面的布局(断点)。

最后,没有首选的方式做“响应”。每个站点都有自己需要满足的要求。您可以尽可能多地学习,并根据您的需求创建首选方式。

答案 2 :(得分:0)

您可以随时使用:

 <meta name = "viewport" content = "width = device-width">
在标题中

。然后整个网站将调整大小以适应移动设备。

您的所有js仍应在移动设备上运行。它只是'闪光'不会。

该网站对此没有“响应”但是,根据网站和访问者需要多少交互等,有时这是足够和简单的?