根据浏览器更改DIV的属性

Question

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

所以..我想我的问题是，如果有什么好的方法来区分使用哪个浏览器，然后根据浏览器改变DIV的属性。

谢谢。 Michal

Answer 1

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

如果你想知道的不仅仅是如何做到这一点更多地了解它，通过这个网站：https://developer.mozilla.org/En/Browser_Detection_and_Cross_Browser_Support

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

一旦检测到，你可以设置一个if语句来确定显示哪个div。

Answer 2

有两种方法可以做到这一点，一个作为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 3

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

AS Terrik说，你可以使用客户端代码来动态改变页面，但这并不是最好的方法。

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

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

Answer 4

您可以使用CSS media queries