Change style if website is viewed on a mobile device

Question

Possible Duplicate:
CSS media type: How to load CSS for mobile?

I am in the middle of a project, you can see all of the code I use in the source.

On the homepage there is a lightweight javascript slider, the problem is for some reason it does not show when used on a mobile device. So can anyone either help me come up with a solution OR tell me how I can show something different if its viewed on a mobile?

To show different IE styles I use this:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->

Is there something similar for mobile??

Ricky! [Media Queries](http://css-tricks.com/css-media-queries/)! — Dunhamzzz, Jun 08 '12 at 08:50
Maybe [this](http://www.thesitewizard.com/css/excludecss.shtml) will help you. — Leri, Jun 08 '12 at 08:51
-1 Include only the code you are having problem with, and include it in your question, not as a link. — Emil Vikström, Jun 08 '12 at 08:51

score 8 · Accepted Answer · answered Jun 08 '12 at 08:50

8

You can use mediaqueries for that: http://www.w3.org/TR/css3-mediaqueries/

Basically it looks like this:

@media only screen and (max-device-width: 480px) {
   /* .... styles */
}

answered Jun 08 '12 at 08:50

Christoph

50,121
21
99
128

ok great thanks, any chance you can tell me how I would hide the javascript slider if viewed on mobile? Is it possible? – RuFFCuT Jun 08 '12 at 09:06
@RickyDawn you mean the javascript slideshow to the right? Just add INSIDE the mediaquery `#coin-slider{display:none;}`. – Christoph Jun 08 '12 at 09:15

px4n · Answer 2 · 2012-06-08T08:59:23.163

0

To do this with PHP, you could use something similar to the below:

// check if user agent is mobile
function isOnMobile()
{
  // match popular mobile devices
  if (preg_match('/phone|iphone|itouch|ipod|symbian|android|htc_|htc-|palmos|blackberry|opera mini|mobi|windows ce|nokia|fennec|hiptop|kindle|mot |mot-|webos\/|samsung|sonyericsson|^sie-|nintendo|mobile/', strtolower($_SERVER['HTTP_USER_AGENT'])))
  {
    return TRUE;
  }
  return FALSE;
}

edited Jun 08 '12 at 08:59

answered Jun 08 '12 at 08:52

px4n

416
2
6

Point taken on that, I assumed he wanted to do it in PHP, have just re-read the question. – px4n Jun 08 '12 at 08:59

score 0 · Answer 3 · answered Jun 08 '12 at 08:54

0

Try using Media Queries:

@media (max-device-width: 500px) {

}
@media (min-device-width: 500px) {

}

answered Jun 08 '12 at 08:54

Praveen Kumar Purushothaman

164,888
24
203
252

score 0 · Answer 4 · answered Jun 08 '12 at 09:04

Some people consider browser sniffing a bad practice so media queries might be a good solution.

From my point of view, since mobile devices also have different browsers and each browser behaves different (specially black berry devices). You will need to either do browser sniffing of media queries.

Each mobile device will have a different screen resolution, so you will need different css conditions for each mobile device you want to support.

There's a very good tutorial on this link.

How to use media queries

Resolution specific style sheets

Javascript Browser Detection

Change style if website is viewed on a mobile device

4 Answers4