Mobile 我可以为移动站点调用不同的html吗？基于宽度？

希望我的问题不会太模糊

我设计了一个非常简单的网站。您可以看到它的图像>>>

但现在我正在尝试制作一个手机版本。 然而，我正在考虑对移动版使用不同的html，因为桌面版有jquery弹出窗口（prettypto）和一个非常大的可伸缩的背景，这在移动屏幕上不是很好

我不知道该怎么做。因此，我的第一个问题是：

1.）如何为手机调用不同的html？

此外，对于平板电脑，网站在横向模式下呈现得相当好，但在纵向模式下会变得怪异。所以我的第二个问题是：

2.）可以根据宽度调用不同的html吗？如果是，有什么办法吗？

---

因此，如果平板电脑以纵向模式查看网站，他们会得到移动版本，如果他们以横向模式查看网站，他们会得到桌面版本。

我不确定你想做什么，但从开发者和移动用户的经验来看，你的建议不是一个好主意。再说一次，既然你没有提到你想做什么，我只是笼统地说。一致性对于用户体验来说非常重要，提供完全不同的行为和定位看起来并不是一个好的可用性。另外，请记住，在今天的平板电脑上，切换方向非常容易。你会在每次方向改变时加载每个版本吗？如果用户使用3G怎么办

---

但从技术上讲，可以根据宽度或方向加载。使用AJAX并加载适当的内容。

我还没有尝试任何操作，因为我想找出最佳解决方案。我的背景宽度为2800px，并根据屏幕宽度调整了大小，但如果从手机上观看，下载它就没有意义了。而且，正如我所说的，我的弹出窗口在移动屏幕上显示不好。但我想把它们保留在桌面屏幕上。所以我想我可以为手机创建一个完全不同的网站（相同的字体和总体设计氛围，但不同的布局），或者有另一个更优雅的解决方案？你应该使用CSS媒体查询来加载移动版本的图像：