0

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?

LeBlaireau
  • 17,133
  • 33
  • 112
  • 192

3 Answers3

1
<link type="text/css" rel="stylesheet" href="css/iphone.css" media="all and (max-width: 480px)" />
kubedan
  • 616
  • 2
  • 7
  • 26
  • Maybe I didnt understand original question, but... I understood that he what use css/iphone.css in chrome/firefox if window is resized under 480px. – kubedan Apr 04 '12 at 12:16
0

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

Community
  • 1
  • 1
Marc Stober
  • 10,237
  • 3
  • 26
  • 31
-1

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

user1163513
  • 4,087
  • 7
  • 24
  • 25