The responsive design in Firefox Browser 12.0 is incorrect. Below my settings:
Enable the responsive.custom.css file: enabled
Mobile first: enabled
responsive.custom.css:
/* Smartphone portrait */
@media only screen and (max-width:320px) {
body {
background-color: blue;
}
}
/* Smartphone landscape */
@media only screen and (min-width:321px) and (max-width:480px) {
body {
background-color: green;
}
}
/* Tablet portrait */
@media only screen and (min-width:481px) and (max-width:768px) {
body {
background-color: yellow;
}
}
/* Tablet landscape */
@media only screen and (min-width:769px) and (max-width:1024px) {
body {
background-color: orange;
}
}
/* Standard layout */
@media only screen and (min-width:1025px) {
body {
background-color: red;
}
}
IE 9.0.8.112.16421 - OK
Safari Windows 5.1.7 (7534.57.2) - OK
Chrome Windows 19.0.1084.52 - Browser window can be set not less than 373px wide. Error in the Chrome browser?
Firefox Windows 12.0 - The colors blue (max-width: 320px) and green (min-width: 321px and max-width: 480px) does not appear. The background is yellow.
Comments
Comment #1
Jeff Burnz commentedBrowser setup issue: http://stackoverflow.com/questions/7663005/is-firefox-6-7-handling-max-w...
Comment #2
Anonymous (not verified) commentedThank you Jeff, you're right. If I disable the navigation menu in firefox, then the output of the media-queries is correct.
Comment #3
Jeff Burnz commentedYep, its a bit of a pain! I disable nearly everything and run Firebug on a separate monitor entirely.