Desktop web version and mobile web version in Opera Mini

responsive-design mobile-website wap opera-mini
paulfah picture paulfah · Jan 23, 2013 · Viewed 11.6k times · Source

So I have a website and I mean to make 2 version of it, the desktop version (with full features) and mobile version (simplification of the desktop version). I'm using media query in CSS to adjust the style. It works well in native browser. When I open my web using native browser it will show the mobile version style. But somehow when I open my web using Opera Mini, it keeps showing the desktop version instead.

I have googled it and didn't found any clue. Any idea how does it happen? Thanks!

Answer

paulfah picture paulfah · Jan 25, 2013

I finally found what's wrong with it. Turns out I was stupidly using @media screen only and Opera Mini doesn't seem handle it well. I've googled it for hours. Someone said actually Opera Mini supports @media screen but other people said that the right media property for Opera Mini is @media handheld. Well, I tried to play safe by simply changing it to @media all. And it works!

Related questions

Responsive design with media query : screen size?

I'm working on responsive designed web site using media queries. But i do not know how to take a good width set. As you can see on this table, there is a lot of different resolution even for a single …

Read More
How to target Galaxy Nexus and Nexus 7 with media queries?

I have two devices that I'm testing site design with. Samsung Galaxy Nexus and Asus Nexus 7 tablet. I'm having a really hard time figuring out how to target these individual devices with media queries. I'm not sure about what values …

Read More
Font scaling based on width of container

I'm having a hard time getting my head around font scaling. I currently have a website with a body font-size of 100%. 100% of what though? This seems to compute out at 16 pixels. I was under the impression that 100% would somehow refer …

Read More