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!
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!
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!
Related
IDE: Eclipse
Desktop OS: Mac
Device : Android 4.0.4
Hi,
last week i sent a new android build to the server, and it updated the jar files i have on my Mac, then i installed the app on LG android 4.0.4 device that i tested before, and was surprised to find some pages display all black.
After investigating a little, i discovered that when i use tabs on any form the form will be displayed black only on android, no problem on simulator nor IOS iPhone 6S.
I looked at the forum and i found similar problem happened a year ago , and the solution was to use "android.asyncPaint=false" temporarily . now this removed the black, but messed all the rendering while navigating between tabs.
So my question is why this happened now? the past three months i was developing and deploying on android without any problem. Did the newest update corrupt something?
Thanks
Sam
Using the android.asyncPaint flag is discouraged as it will fallback into a relatively slow compatibility mode. We are currently investigating some regressions in some rendering optimizations that affect some devices and are in the process of deploying a solution for that.
Please let us know if the issues persist.
I'm planning web application and considering silverlight as development platform. Will it help to solve browser compatibility issues? The app intended to be used on desktops only (no mobile).
Yes, it will solve browser compatibility issues, and could work on both Mac OS and Windows with the very same code.
The only drawback is that, the first time your user connect to your application, he will need to download the Silverlight plugin.
Awesome you would say? Well, unfortunately some people that probably never try to do something like image processing or advanced line of business application in a browser decide that plugins are not so cool and that you would be able to do the same thing with the magic power of HTML5.
We are still waiting to have the same possibility in HTML5 that we have in Silverlight or Flash, but plugins are already dead. At least as long as no big compay want to push them again.
So, my advice would be: don't start a project in Silverlight. You will have problems, even if you do not target mobile. For example it becomes harder and harder to find compatible good tools (like ReSharper, NCrunch, or even just a decent unit testing library). And in further release of Windows and Mac OS, it will probably not be supported at all (IE for Windows RT already does not support Silverlight).
Sorry man, Silverlight is dead, you arrive after the battle.
If your developing your application for an Intranet, I would say Silverlight is an excellent choice.
If you are developing for the Internet, use an HTML based language
I want to use mobile emulator/simulators to test my website with. I only found Opera Mini (http://www.opera.com/mobile/demo/) and Windows Mobile 6 (http://www.microsoft.com/download/en/details.aspx?id=9263)
Where can I download emulators for more recent mobile devices?
P.S. Please let me know if this does not belong in StackOverflow, thanks.
I found MITE to be most helpful.
Even better, you get a lot of support for the free version, but (if you pay for Pro) you get almost every mobile browser out there, the ability to remotely test (load speed) and a lot of other cool features.
Is there a good all in one emulator for testing mobile websites. Just using 'media queries and need to test on predominantly iphone, blackberry, android, and windows 7 phones.
Many thanks,
C
There is no one solution that will work on all these platforms however the SDKs for all include simulators/emulators and the best part is that all but for the iPhone are free.
BlackBerry Simulators
Android Emulator
Windows Phone 7 Emulator
The iPhone SDK also includes a simulator (Mac only) but if you need to test on a PC, you can do a pretty good job using http://iphone4simulator.com/ running in Safari for Windows.
As with all simulator/emulator usage, these are good for initial testing but you need to use an actual device to get true results.
Also note that different BlackBerry devices use different default browsers. Android devices also use varying versions of WebKit so you may see some variation between actual devices which isn't shown in the emulator.
In addition to Matt's reply, I think you should also test the different browsers available for smartphones.
For example the popular Opera mobile: http://www.opera.com/mobile/demo/
You might find http://quirktools.com/screenfly/ very useful for testing mobile websites on different screen sizes. It's not as true as a native emulator, but it allows you to test several phones, tablets, etc. at one site and you don't have to install any software.
try http://www.browserstack.com/. This one is not free, but it gives a trial period of 30 minutes for each account we create
Try Mobile web browser emulator this free tools help you testing mobile websites
If you just want to simulate the mobile device user agent and screen resolutions, also check out chrome's mobile device simulator https://developer.chrome.com/devtools/docs/device-mode#enable-device-mode
I recently did the Chris Coyier tutorial from the css-tricks.com weblog #38: Basics & Tips on Designing for the iPhone. Needless to say I got very excited and suggested to a guy that I do some code monkey work for that we could now offer iPhone websites to his clients. He said cool, but what about other mobile devices? good question. So what is the low down on designing websites for Android, Blackberry, WindowsMobile, etc? Are people bothering with the other platforms? Thanks.
Recent Webkit and Opera:
For iPhone Safari, Opera Mobile, and Webkit on Android development are similar (but not identical), and development for those is quite simple.
You can rely on CSS2.1 and JavaScript+DOM (but be careful with UI events). You might get away with serving your regular website with just few changes to stylesheets.
The trick is in serving of these stylesheets. Don't use User-Agent string.
Because some mobile browsers read handheld media, and some insist on screen styles and pretend to have 960px-wide screen (iPhone :/), you'll need to serve mobile stylesheet with both:
<link media="handheld" ...>
<link media="screen and max-device-width:480px" ...>
The latter is CSS3 Media Query – very useful and works with other mobile browsers too (you can use it in stylesheets with #media {}).
Don't rely on :hover or onmouseover because these events don't work on touch screens.
onclick is delayed, mousemove may not work. Custom DHTML widgets (dropdowns, sliders) and drag'n'drop won't work on touchscreens, unless you use touch events (which thankfully all newest browsers adopted).
Viewport
In addition to Apple's proprietary (and IMHO inflexible and violating separation between markup and layout) <meta name=viewport> have a look at CSS3 #viewport, which currently is supported in latest Opera as #-o-viewport and hopefully others will follow.
Simulators/Emulators
To test page in Opera Mobile, get the simulator (or just older desktop version and choose View → Small Screen).
Opera Mini is special, as CSS is re-formatted a bit and DHTML is executed on server-side, which doesn't always give results you'd expect. There's simulator available.
Android
You need Android SDK, fiddle with commandline to launch its clunky UI, download bunch of packages, create virtual device with dozen of irrelevant obscure settings, have patience for this monster to load and turn computer's fans into a quadcopter, and then you can sss..sss..slooowlyyyy test in the "Browser" (my Intel i5 is too slow to simulate Galaxy Tab - browser "stops responding" even before I finish typing URL)
It's easier to get a phone/tablet with Android and test on a real device (but avoid Samsung's Player "iPod" equivalent, as it's rubbish with obsolete software).
Android browser is really painful for anyone who doesn't love Linux way of doing things — just to read JS console you need to fiddle with remote debug connections and log filtering on commandline.
Firefox Mobile (previously Fennec)
There's simulator available (links for "Windows / Mac OS X / Linux" below mobile downloads are not the desktop version, but mobile-for-desktop-OS).
Simulator is very basic, Mobile Firefox itself is IMHO really good, e.g. overflow:scroll works great, while on WebKit-based browsers overflow implementation varies between very unintuitive and totally broken.
Pocket IE:
PIE for Windows Mobile < 7 is not the same engine as IE on Windows. It's mostly as primitive and buggy as IE4 was, but (barely) supports some surprisingly advanced properties like display:table.
It reads both handheld and screen stylesheets at the same time, violating the standard and shooting itself in the foot. If you're going to suppot PIE, then put link to handheld stylesheet last and reverse/override all the rules from screen styles in it.
Anyway, it's dead and it's hard to get an emulator.
Windows Phone 7 currently ships with IE7-alike, and Microsoft promised something of IE9 level later.
New (minority) BlackBerry
The latest WebKit-based BlackBerry browser is quite good, you can treat it as 1st-class citizen (see WebKits comparison linked at the top).
Currently most popular BlackBerry & OpenWave, Blazer, etc.:
Before the BB OS6, it's a nightmare. Only basic HTML works. CSS works on some models, but is primitive and broken. JavaScript works only on some models and it's incredibly slow and lacking (forget about even basic DHTML).
There's free BB simulator available from RIM (annoying registration required). If you're unlucky, it'll launch properly once and then you'll have to completely reinstall it :)
The same thing is with hundreds of other mobile browsers on low-end phones (powered by likes of OpenWave, which has decent simulator) . You'll have to prepare 1-column basic HTML stripped down website for them.
Google Wireless Transcoder
Even if you create nifty (X)HTML optimized for every mobile device out there, users of Google Mobile Search will never see it!
Instead, every page will be proxied through "Wireless Transcoder" which brutally chops the code, stripping all stylesheets and scripts (regardless whether browser supports them or not), and even <font> :(