0

hi can someone please help i am trying to find out a way of pointing the browser to an alternative css stylesheet if the user is accessing my site of a mobile device?

i have tried using the following code but it doesnt seem to be working for me. is there any other way of doing this maybe in javascript or some other way?

i would really appreciate it if someone could show me a way of doing this as everything i've treid doesnt work.

thanks

<link media="only screen and (max-device-width: 480px)"
href="iPhone.css" type="text/css" rel="stylesheet" />
John James
  • 31
  • 4
  • 7
  • Using "standard" device widths as your breakpoints aren't a very good idea: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/ and http://designshack.net/articles/css/responsive-design-why-youre-doing-it-wrong/ – cimmanon Feb 18 '13 at 23:44

1 Answers1

0

Try this (retrieved from Perishable Press):

<link rel="stylesheet" href="http://domain.tld/screen.css" type="text/css" media="Screen" />
<link rel="stylesheet" href="http://domain.tld/mobile.css" type="text/css" media="handheld" />

The reason for having a line with media="screen" is to fix an issue with windows based mobiles that will take media="screen" over media="handheld"

Yoav Kadosh
  • 4,807
  • 4
  • 39
  • 56