问题
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!
回答1:
There are a number of reasons why Opera Mini is showing the desktop version of the site. The most likely is that your website is not properly detecting Opera Mini as a mobile site and is not returning the correct content. If you're using some plugin or other piece of software that is automatically handling the routing of desktop vs. mobile for you, that might be the culprit. Also, it's possible that this is happening by design, because of how Opera Mini works.
Opera Mini runs web content through Opera's own proxy servers and attempts to 'optimize' the content before delivering it to the user. That is, content is rendered first on the proxy server and then delivered to the device. This of course creates all kinds of complications for someone who is trying to deliver a consistent mobile web experience to their users. Fortunately, Opera provides a development guide to help give you a better sense of what's going on and how to cope with it.
Opera Mini is, in my experience, a very difficult browser to work with. At the Wikimedia Foundation, we server a very limited Wikipedia (and sibling project) experience when we detect someone's using Opera Mini.
You should definitely read through the opera mini development guide and make sure that any device detection you're doing is correctly recognizing opera mini as a mobile browser. If you're just using media queries, you may either want to reconsider a more robust approach to mobile detection, or adjust your design accordingly to work for opera mini. Good luck!
回答2:
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!
来源：https://stackoverflow.com/questions/14481717/desktop-web-version-and-mobile-web-version-in-opera-mini