handheld css does not work properly

css mobile handheld
joel picture joel · Dec 16, 2011 · Viewed 8.5k times · Source

on my site i have 3 css

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

i thought the media handheld will automatically load my site formated for devices

when i load my site with my android, i still see the "site.css" why it does not load the handheld.css?

Answer

Oleg Mikheev picture Oleg Mikheev · Dec 16, 2011

Apparently Android/iPhone/Nokia browsers don't think that they are handhelds.

You should use media queries to detect devices.

Related questions

How to target the Blackberry browser?

I am using the following to target iphones, and handheld devices to use specific mobile styles sheets but the Blackberry browers is picking up only the regular screen style sheets. <link media="handheld, only screen and (max-device-width: 320px)" href="…

Read More
@Media min-width & max-width

I have this @media setup: HTML: <head> <meta name="viewport" content="width=device-width, user-scalable=no" /> </head> CSS: @media screen and (min-width: 769px) { /* STYLES HERE */ } @media screen and (min-device-width: 481px) and (max-device-width: 768px) { /* STYLES HERE */ } @…

Read More
Media Queries: How to target desktop, tablet, and mobile?

I have been doing some research on media queries and I still don't quite understand how to target devices of certain sizes. I want to be able to target desktop, tablet and mobile. I know that there will be some …

Read More