2014-02-12 89 views
1

我们的网站是为桌面开发的,现在我已经为创建其移动版本的任务受到祝福。移动设计可能与桌面版本有很大不同,并且网站建立在Wordpress上。现在,我不知道什么是最好的办法:创建Wordpress站点的移动版本

  1. 应我坚持到CSS的变化只(尽可能)和使用媒体查询瞄准较小的屏幕?我担心即使显示这些大图像仍然被下载:无。在每个页面上也会出现很多JS,而这个JS不会被用在移动版本的站点中,所以我将不得不另外建立可能的检查等等。这种方法还有其他的问题吗?

  2. 服务器端代码应该检测其手机浏览器是否应该返回自定义html?这种方法的其他任何问题?

  3. 以上两种混合物?

  4. 还有其他的选择吗?

如果任何人有类似项目的经验,并可以指出什么样的解决方案会是伟大的。

+0

我认为这取决于手机版本的不同。如果只是样式和布局上的细微差别,您可能可以使用CSS媒体查询。如果这是一个完全不同的网站,您可能需要为网站的移动版本提供服务(或重定向)。这就是说,我没有WordPress的经验,所以我不知道是否有任何WP特定的解决方案。 – Zhihao

回答

0

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

我想很多人都没有意识到压缩的2x图像比压缩的1x图像小。因此,如果您为图像使用压缩,则只需使用大图像即可获得更好的网络性能。有多少图像显示是潜在的问题,可能会导致负面的表现,但我认为这是微不足道的。

您是否使用完全不同的用户界面移动比桌面还是只是一个不同的元素定位?如果您必须支持两个模板,那么您需要考虑Adaptive(从服务器响应),其中服务器将根据UserAgent确定将哪个模板发送给客户端。除了客户端所具有的浏览器类型之外,UserAgent并不能真正帮助你。要弄清设备屏幕的尺寸,您需要了解尺寸或使用WURFL等服务。

如果您可以使用媒体查询在一个模板中完成所有UI更改,那么最好从“移动优先”方法开始工作,基本上从您的移动网站的外观开始,然后弄清楚如何重新定位页面上的元素以尽可能地匹配当前的桌面外观。使用响应与自适应方法将消除对UserAgent检测的需求,您只能使用设备的宽度。

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

最后,没有首选的方式做“响应”。。“每个站点都有它自己的需求需要得到满足它是由你来学习尽可能多地和你的需求打造的首选方式

0

你总是可以使用:

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

在你的头。然后,整个网站将调整大小以适合移动设备。

你所有的JS应该还是在移动设备上运行。这纯粹是“快闪”那不会。

网站ISN” t“响应”与此,但取决于网站和多少互动客户需要的等等,有时这是足够和简单的?

相关问题