CODEWITHSUNDEEP
htmlcsswordpress
mlichwa
mlichwa

Reputation: 35

Change DIV's properties depending on the browser

I'm looking for a way to distinguish which browser is used and then change properties of the DIV's background. Right now I'm using a picture as a DIV's background and it has to have a fixed width and height. However, when the site is viewed from a mobile browser ( iOS, Android, etc..) I would like to use a simple color as a background and make it flexible in terms of the width and the height.

So.. I guess my question is if there is any good approach for distinguishing which browser is used and then changing DIV's propertied depending on the browser.

Thanks. Michal

Upvotes: 0

Views: 1777

Answers (4)

Alex
Alex

Reputation: 344

You could use CSS media queries

Upvotes: 2

Jerome Cance
Jerome Cance

Reputation: 8183

Well, there are several approach to do that.

AS Terrik said, you can use client side code to dynamic change the page but this is not necessary the best approach.

A mobile page is not only a background color change. It also can be a layout change. I suggest you to use the MVC pattern : same model, same controller but one view by "browser" (device seems to be a better term in your case). When the user thirst visit your site, send the device used to your server and display the good view (via a redirection). Don't forget to save the user agent in the user session to avoid this redirection process for next pages.

I suggest you to look at GWT, which is a powerful framework when you need multi device capabilities.

Upvotes: 0

leopic
leopic

Reputation: 3012

There's two ways to do it, one as Terrik said using Javascript and do it on the client-side, you could use this jQuery plugin to add a class into the body to do it: https://github.com/leopic/Simple-jQuery-UA-Spoofing

The other is actually doing on the server side, check the headers of the page in the request and change your content before the page even loads, for instance in PHP http://php.net/manual/en/function.get-browser.php

My recommendation is, don't do either, develop your page to be responsive and accomodate to different widths/resolutions and not browsers: http://www.alistapart.com/articles/responsive-web-design/

Upvotes: 4

Terrik
Terrik

Reputation: 546

This needs to be done using client side, not server side. (i.e. JavaScript not PHP)

If you want to know more about it than just how to do it, go through this site: https://developer.mozilla.org/En/Browser_Detection_and_Cross_Browser_Support

If you just want some sample code and a quick explanation, I've used this before: http://www.quirksmode.org/js/detect.html

Once you detect that, you can set up an if statement to determine which divs to display.

Upvotes: 0

Related Questions