Question

我正在使用CodeIgniter框架构建一个响应式网站，我遇到了一个问题，我希望有人可以提供帮助。

网站本身实际上是一种搜索大型信息数据库并在表格中精确格式化结果的方法。

由于手机屏幕空间不足，这些设备上的搜索条件和结果将减少到完整桌面浏览器上可用的20+中的3个，这意味着只有三个数据库中的字段，将在这些较小的设备上搜索并呈现给用户。

无论如何，我知道如何使用媒体查询响应地设置页面样式，但有没有办法根据设备的屏幕尺寸实际构建搜索表单的内容？

例如我看到它有点像这样：

或者如果它们在桌面浏览器上：

我希望这有一定道理。 “那么平板电脑呢？”你可能会问，他们也会得到满足，但还不确定他们将会提供多少个搜索字段。

感谢所有的想法和建议。贝。

Answer 1

您可以使用User Agent class检测人们在访问您的网站时是否使用手机。

当然，这有一些缺点，但如果用户正在使用移动设备，则可以识别服务器端。我看到的最大缺点是：如果用户使用的是一个未知的用户代理，实际上是一部手机，那么你将为他提供20个字段，而不是3个字段。

Answer 2

使用CSS3，您无需使用用户代理或现代化器。

类似的东西：

@media screen and (max-width: 360px) {
  table td:nth(4n) { display: none; }
}

应该能够满足您的需求。您也可以将其更改为@media mobile ....并查看它是否也选择了它，但鉴于不同的设备有不同的屏幕宽度，我更喜欢这样做。

Answer 3

我认为检测可以通过java脚本/ HTML / CSS完成（我想......不确定其他选项）

并且，这可以解决所有问题。无需使用CI。

http://modernizr.com/

更多选择是可观的。 :)