Css for iphone not getting used in safari

HTML & CSS
1

I am having trouble trying to work out why on an iphone my css file never gets used.

when a user arrives at my site with a screen size <= 1024 i apply a different style sheet using this function - http://www.kelvinluck.com/2006/05/switch-stylesheets-with-jquery/. i know this isnt a way of doing it for an iphone as you use user.agent but i am doing it for smaller screens at the same time.

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

that is how i order my stylesheets in my html. on opera on the iphone the css works fine but its just safari. on android the site works fine.

any help would be really grateful

thanks in advance

2

Here’s a differnt approach you could consider:

It’s definitely worth looking at that slideshow.

3

You should probably use a @media query to check to see if the user is using an iPhone

A quick google search and this was one of the first links I found.

http://shaunmackey.com/articles/mobile/using-media-query-to-declare-css-for-iphone/

http://www.google.com/search?q=%40media+queries+iphone&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a

4

ive tried doing that but have had no luck… the odd thing is that it works fine in opera on the iphone but not in safari. ive read that the iphone wants to read media=“screen” first and will load all css files that have that connected but i dont but that is also the default

5

You confused me. If the iphone wants to read media=“screen” first then set up a blank css file and link to it using media=“screen”.

Then override the blank css file with the iphone media query

6

i dont think that will work as i already have a standard stylesheet which always appears instead of my mobile stylesheet. when a screen is greater than 1024 the stylesheet index is applied and when it is smaller mobile is applied. the problem is safari on an iphone doesnt like that. it always displays the index.css

7

What is the media query on your “index.css” file? (might want to rethink the name of that. most people use style.css. You don’t want people to think it only styles index.php)

8 
media="only screen and (max-device-width: 480px)"

have i got to add any meta tags or anything?

9

Not meta tags, but your html should look like


<link href="index.css" rel="stylesheet" title="screen" type="text/css" media="screen" />
<link href="css/mobile.css" title="mobile" rel="alternate stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" />

That’s what tells the browser to override the default stylesheet

10

thanks ill try that and hopefully something will work