media queries and firefox/chrome

Question

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?

Answer 1

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

Answer 2

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

Answer 3

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