min-width:320px not firing correctly on Opera Mini

Question

Testing some media queries in various browsers on Android and noticed Opera Mini 6.5 on my Samsung Galaxy S does not seem to apply stlyes inside the following code.

@media screen and (min-width: 320px){

It seems if I lower the value to 282, Opera Mini will excute the styles inside the media query.

@media screen and (min-width: 282px){

I'm wondering if anyone else has run into issues with Opera Mini not handling media queries correctly on Android phones. All of the other browsers I've tested on Android seemed to work fine with min-width:320px as well as my tests of Opera Mini on iOS devices.

I've set up a few test pages to check out with variations on the viewport meta tag.

h5bp Mobile 2 meta tags - goo.gl/XfEVx

h5bp Mobile 2 meta tags with maximum-scale set to 1.0 - goo.gl/mgKJA

h5bp Mobile 3 meta tags - goo.gl/uxPsa

h5bp Mobile 2 meta tags with maximum-scale set to 1.0 and Opera CSS viewport tag - goo.gl/McNhj

Viewport meta tag only -goo.gl/QMnmp

I noticed this issue on my Samsung Galaxy S Epic 4G in portrait orientation on Opera Mini 6.5.

Answer 1

According to Opera docs, Opera Mini 6.5 supports Media Queries and using Presto 2.8. The support of media queries in Presto 2.8 seems to be complete.

Did you try to play with the initial scale or device-width

<meta name="viewport" content="width=device-width"/>  

or

initial-scale=1.0

I searched our Opera bug reports but I didn't see anything related to this. Do you have a link to a Web page so we can test further.

Answer 2

Do you see the same problem in all versions of Opera and IE9? Do you use Modernizr and Respond.js? I had a very similar problem, Respond.js was the source.

I solved it by bundling Modernizr and Respond.js into single file via http://www.initializr.com/.

Maybe this helps.