根据浏览器更改DIV的属性

Question

我正在寻找一种方法来区分使用哪种浏览器，然后更改DIV背景的属性。 现在我正在使用一张图片作为DIV的背景，它必须有一个固定的宽度和高度。但是，当从移动浏览器（iOS，Android等）查看网站时，我想使用简单的颜色作为背景，并使其在宽度和高度方面具有灵活性。

所以..我想我的问题是，是否有任何好方法可以区分使用哪种浏览器，然后根据浏览器更改DIV的属性。

感谢。 米甲

Answer 1

有两种方法可以做到这一点，一种是Terrik说使用Javascript并在客户端进行，你可以使用这个jQuery插件将一个类添加到正文中来执行它：https://github.com/leopic/Simple-jQuery-UA-Spoofing

另一个实际上是在服务器端执行，检查请求中页面的标题，并在页面加载之前更改内容，例如在PHP http://php.net/manual/en/function.get-browser.php

中

我的建议是，不要这样做，开发您的页面以响应和容纳不同的宽度/分辨率，而不是浏览器：http://www.alistapart.com/articles/responsive-web-design/

Answer 2

您可以使用CSS media queries

Answer 3

这需要使用客户端而不是服务器端来完成。 （即JavaScript而不是PHP）

如果您想了解更多相关信息，请访问以下网站：https://developer.mozilla.org/En/Browser_Detection_and_Cross_Browser_Support

如果你只想要一些示例代码和快速解释，我之前使用过： http://www.quirksmode.org/js/detect.html

检测到后，您可以设置if语句来确定要显示的div。

Answer 4

嗯，有几种方法可以做到这一点。

AS Terrik说，您可以使用客户端代码动态更改页面，但这不是最佳方法。

移动页面不仅是背景颜色变化。它也可以是布局变化。我建议你使用MVC模式：相同的模型，相同的控制器，但一个视图由“浏览器”（设备似乎是一个更好的术语）。当用户渴望访问您的站点时，将使用的设备发送到您的服务器并显示良好视图（通过重定向）。不要忘记在用户会话中保存用户代理，以避免下一页的重定向过程。

我建议您查看GWT，当您需要多设备功能时，它是一个功能强大的框架。