我们有专为台式机开发的网站，现在我有幸负责创建它的移动版本。移动设计可能与桌面版本有很大不同，并且该网站是基于 Wordpress 构建的。现在我不确定什么是最好的方法:
我是否应该(尽可能)坚持只更改 CSS 并使用媒体查询来定位较小的屏幕？我担心大图像仍然被下载，即使这些是显示:无。每个页面上也有相当多的 JS，并且该 JS 不会在网站的移动版本中使用，因此我可能必须构建额外的检查等。这种方法还有其他可能的问题吗？
服务器端代码应该检测其移动浏览器是否应该返回自定义 html？这种方法还有其他可能的问题吗？
以上两者的混合？
还有其他选择吗？
如果有人有类似元素的经验并能指出我所提供的解决方案，那就太好了。
最佳答案
尽可能使用媒体查询进行布局更改。 对于你的 JS，为你自己创建一个小的断点处理程序，它将触发 js 运行或停止。
我认为很多人没有意识到压缩的 2 倍图像比压缩的 1 倍图像小。所以，如果你对你的图像使用压缩，你实际上只使用大图像就能获得更好的网络性能。显示多少图像是一个可能导致负面性能的潜在问题，但我认为它微不足道。
您是否在移动设备上使用与桌面设备完全不同的用户界面，或者只是元素的不同定位？如果您必须支持两个模板，那么您将需要考虑自适应(从服务器响应)，其中服务器将根据 UserAgent 确定将哪个模板发送给客户端。除了客户端拥有的浏览器类型外，UserAgent 不会真正为您提供太多帮助。要计算设备屏幕的尺寸，您需要知道尺寸或使用 WURFL 等服务。
如果您可以使用媒体查询在一个模板中完成所有 UI 更改，那么最好从移动优先的方法着手，基本上从头开始设计网站的移动外观，然后弄清楚如何您可以重新定位页面上的元素，以尽可能接近当前桌面的外观。使用响应式与自适应方法将消除对 UserAgent 检测的需要，您将只使用设备的宽度。
在“移动”和“桌面”中考虑响应式确实是有局限性的，并且会引起一些困惑。移动应该是指改变位置的设备。尝试使用小型、中型和大型等名称来描述响应式页面的布局(断点)。
最后，没有首选的“响应式”方式。每个站点都有自己需要满足的要求。尽可能多地学习并根据您的需求创建首选方式取决于您。
关于javascript - 创建 Wordpress 网站的移动版本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21716418/