根據瀏覽器更改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