Изменить свойства DIV в зависимости от браузера

Question

Я ищу способ определить, какой браузер используется, а затем изменить свойства фона DIV.Прямо сейчас я использую картинку в качестве фона для DIV, и она должна иметь фиксированную ширину и высоту.Однако, когда сайт просматривается из мобильного браузера (iOS, Android и т. Д.), Я хотел бы использовать простой цвет в качестве фона и сделать его гибким с точки зрения ширины и высоты.

Итак ... Я предполагаю, что мой вопрос заключается в том, существует ли какой-либо хороший подход для определения того, какой браузер используется, и затем изменения свойств DIV в зависимости от браузера.

Спасибо.Михал

Answer 1

Есть два способа сделать это: один, как сказал Террик, используя 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

Answer 3

Ну, есть несколько подходов для этого.

Как сказал Террик, вы можете использовать код на стороне клиента для динамического изменения страницы, но это не обязательно, лучший подход.

AМобильная страница - это не только изменение цвета фона.Это также может быть изменение макета.Я предлагаю вам использовать шаблон MVC: та же модель, тот же контроллер, но одно представление от «браузера» (устройство кажется более подходящим термином в вашем случае).Когда пользователь жаждет посетить ваш сайт, отправьте используемое устройство на ваш сервер и отобразите хороший вид (через перенаправление).Не забудьте сохранить пользовательский агент в пользовательском сеансе, чтобы избежать этого процесса перенаправления для следующих страниц.

Я предлагаю вам взглянуть на GWT, который является мощной средой, когда вам нужны возможности нескольких устройств.

Answer 4

Это нужно сделать на стороне клиента, а не на стороне сервера.(т. е. JavaScript, а не PHP)

Если вы хотите узнать о нем больше, чем просто узнать, как это сделать, перейдите на этот сайт: https://developer.mozilla.org/En/Browser_Detection_and_Cross_Browser_Support

Если вам нужен только пример кода ибыстрое объяснение, я использовал это раньше: http://www.quirksmode.org/js/detect.html

Как только вы обнаружите это, вы можете установить оператор if, чтобы определить, какие div нужно отображать.