Using CSS to suppress Flash display on mobile devices?

webbcity posted this at 16:54 — 23rd September 2009.

Joined: May 2009

I'm trying to figure out how to get this to work...I've found a few resources about this online but so far none of the methods I've tried have worked correctly. Basically the site I'm working on has a Flash animation on the front page that I want to display correctly when viewed on a PC, but I want it to NOT display when the site is viewed on a mobile device.

I've put the Flash inside of a DIV named "flash" like so:

<div id="flash">
     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="338" height="530">
       <param name="movie" value="reading.swf" />
       <param name="quality" value="high" />
       <embed src="reading.swf" width="338" height="530" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed>
     </object></div>

And I have two style sheets, one called index.css to be used for normal screens, and another one called mobile.css to be used for handheld devices.

The mobile.css file says this about the "flash" div:

#flash {
	display: none;
}

And the proper CSS file is selected based on this code on the index page:

<link href="index.css" rel="stylesheet" type="text/css" media="screen">
<link href="mobile.css" rel="stylesheet" type="text/css" media="handheld">

Am I missing something obvious here? Any ideas what I'm doing wrong?

Thanks-
Tim

greg posted this at 10:38 — 24th September 2009.

He has: 1,581 posts

Joined: Nov 2005

I've not worked with sites optimised for mobile devices, but wouldn't it be easier (and better) to serve a different set of HTML and CSS altogether for mobile?
Such as a sub-domain .. mobile.your-domain.com

Trying to optimise sites for a range of browsers is sometimes tricky, but optimising the same code for all browsers AND mobile devices sounds like a potential for on-going headaches to me.

webbcity posted this at 19:36 — 24th September 2009.

They have: 19 posts

Joined: May 2009

I'm not sure it's less of a headache to design an entirely separate/alternate site for mobile... As it is now, the site looks pretty good on mobile devices, I just want to be able to suppress a few images and Flash items on some of the pages. Supposedly I should be able to do this easily with CSS as I detailed above, but for some reason it isn't working when my colleague looks at the site on his Blackberry...the Flash is still showing.

I hear what you're saying about having an alternate site, and it would make sense if there were going to be radical differences between the two. But the other problem is making any updates, which would then have to be made twice, to both versions of the site. The client is using Adobe Contribute to update it and probably wouldn't appreciate having to make changes in two places. I know there are ways around that too, by using includes and so forth but that is getting into way too much...I was hoping this simple CSS solution would work.

webwiz posted this at 22:06 — 26th September 2009.

He has: 629 posts

Joined: May 2007

CSS support on handheld devices is dodgy. Several will ignore your media="handheld" style sheet. From my initial tests, @media queries seem to be the best bet - but I am only just beginning to investigate. YMMV.

This tutorial on media types may help.

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;

webbcity posted this at 16:39 — 29th September 2009.

They have: 19 posts

Joined: May 2009

Interesting...I think I tried the @media thing too and that didn't work either...I clearly need to do some more research here though. Thanks for that, and for the link! I will go do some reading.