Hi so I have a media query that gets picked up by ios simulator
<link rel="stylesheet" media="all and (max-device-width: 480px)" href="css/iphone.css">
What I would like to do is simulate this on firefox or chrome by resizing the browser, is this possible?
<link type="text/css" rel="stylesheet" href="css/iphone.css" media="all and (max-width: 480px)" />
You need to use max-width. max-device-width is the physical screen size so that won't change. See: What is the difference between max-device-width and max-width for mobile web?
However, that won't fully solve your problem for iOS because Safari reports a width (but not a device-width) of 980px by default, so pages not designed for mobile appear as a full zoomed-out page. So, you also need to add something like this to your HTML:
<meta name="viewport" content="initial-scale = 1.0">
You can find a reference from Apple on viewport settings here: http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Yes you can directly simulate this on Firefox and chrome. But Firefox doesn't support media queries below 480.
You can also check the below link for re-size in Firefox & chrome. http://www.smashingmagazine.com/
Hope This Helps
