Never mind, I was mistaken. Move along, there's nothing here to see.

I began working on the mobile version of our departmental website today and ran into a problem I'm not sure how to solve. I'd assumed I'd use a media query to target mobile browsers such as

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

So I tried this and resizing my browser to less than 480px produced no change (nor did loading the site on my iPhone). After some fiddling I've begun to suspect that the problem is that the "standard" design intended for the desktop browser has a fixed width of 930px. So even when the browser window is smaller than 480px, the viewport is never actually less than 930px.

So I guess my questions are:

  1. Do you guy agree that this is the issue?
  2. If so, is there anything to be done about it?

Thanks very much for any ideas.

3 answers

0
points

I've always used the mobile media setting....

<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"/>

I used this site when I first tried a mobile site. And I use this firefox plugin to view mobile sites. Sorry can't really answer your question for sure.

Answered almost 9 years ago by Tom Guthrie
0
points

I appreciate the effort, but I don't think that will work. The iPhone doesn't respond to the handheld media type because Apple wanted to emphasize its ability to display "the full web." The code I posted is what Apple recommends.

Thanks for the FF plugin. That could be useful.

Answered almost 9 years ago by Grover Saunders
0
points

So it turns out to have been working all along. The property that I was using to test the media query just doesn't do anything. Switching to a different property works fine.

Sorry about that.

Answered almost 9 years ago by Grover Saunders