1

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

该站点本身本质上是一种搜索大型信息数据库并将结果以表格格式显示的方法。

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

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

例如，我看到它的工作方式有点像这样：

  1. 用户导航到搜索页面
  2. 页面检测到他们在手机上
  3. 页面的搜索条目表单仅包含 3 个字段

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

  1. 用户导航到搜索页面
  2. 页面检测到他们在桌面浏览器上
  3. 页面的搜索条目表单包含完整的 20 多个字段

我希望这有点道理。“平板电脑呢？” 您可能会问，他们也会得到满足，但尚未确定他们将呈现多少搜索字段。

非常感谢所有的想法和建议。托尼。

4

3 回答 3

2

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

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

于 2012-04-06T14:24:03.640 回答
1

使用 CSS3，您不需要做任何用户代理或现代化。

就像是：

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

应该能够给你你所需要的。您也可以将其更改为@media mobile .... 看看它是否也能接受，但鉴于不同的设备具有不同的屏幕宽度，我更喜欢这样做。

于 2014-02-27T02:54:21.720 回答
0

我认为可以通过 java 脚本/HTML/CSS 进行检测（只是我认为......不确定其他选项）

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

http://modernizr.com/

更多的选择是可观的。:)

于 2012-04-06T13:20:50.550 回答