Question

我的网站主要是为在Android和iPhone设备上观看而设计的。但是，当然，人们可以通过台式机或笔记本电脑在网上查看它。

该网站目前的宽度为320像素，可容纳大多数手持设备。实际上，我喜欢布局，所以我不介意台式机上的人看到与掌上电脑相同的界面。我喜欢跨设备的界面的一致性。

我理想的做法是为在较大的显示器上观看网站的用户提供附加信息。像这样：

enter image description here

我坚持的关键是如何防止接口B被下载或提供给移动设备。我知道如何创建一个额外的DIV并使用基于浏览器识别的CSS隐藏它。但是，由于各种原因，重要的是接口B不能简单地从某些设备中隐藏，而是甚至不能传输数据。

这可能吗？

理想的解决方案应包括以下注意事项：

默认设置是假设设备是移动设备且仅提供接口答：只有“浏览器嗅探”才能确定性地回归（好吧，尽管它可以得到）设备是一定的白色已知桌面浏览器列表，然后显示界面B.
在服务器端运行的解决方案。同样，没有来自的数据如果怀疑访问者，应转移接口B. 在手机上。
接口A和B可以用框架，DIV，iFrame分开......我是对此不可知，但我对CSS更熟悉，所以拥有它们在两个不同的DIV中，我可能更容易掌握。

Answer 1

1）检查http://us.php.net/get_browser - ＆gt;使用'get_browser'的'ismobiledevice'字段你可能需要一个最新的php_browscap.ini，但你可以得到它here 只需创建一个简单的if语句，然后评估是否要“打印div”。（告诉我，如果你不明白我的意思）

2）有一个“后备”JS，隐藏第二个div（无论如何应该是空的）

Answer 2

我根本不会使用浏览器嗅探，而是使用CSS 3媒体查询来查看“接口B”是否适合并仅在显示时将其加载到AJAX中。

这样的事情：

<style type="text/css">
  @media only screen and (max-width: 320px) { 
     #interface-b {
       display: none;
     }
  }
</style>

<script type="text/javascript">
   // Using jQuery for convience here
   // Let #interface-b be empty originally, 
   // and load it's content with AJAX only if needed.
   jQuery(function() {
      if (jQuery("#interface-b").is(":visible")) {
        jQuery("#interface-b").load(...);
      }
   });
</script>

（编辑：添加only关键字以获得更好的向后兼容性）

如何根据浏览器是否移动来分隔网页上的列？

2 个答案: