Re: Mobile Friendly needed

Posted by GregChapman on Jun 11, 2012; 1:57pm
URL: https://support.nabble.com/Mobile-Friendly-needed-tp7580261p7580324.html

Well, I've had a look and not got too much further forward.

You can probably stop reading at this point, but for the record...

 I have always liked my Android browser for the way it usually manages to snap to a column when zooming with a pinch/spread finger action. However, it definitely doesn't like some things that work fine in IE/FF/Chrome on my desktop.

I discovered this on a non-Nabble site of mine a few weeks ago. I had a set of <div>s on styled to produce a main content area, left floated column containing menu in an unordered list and, uniquely on the affected page, a right floated column containing some graphical links elsewhere on the site.

When I checked it on my Android I found that the contents in the right column overflowed into the main content area, in spite of the width of the containing <div> and right margin of the main content area of the page matching appropriately. The trouble is I can't recall exactly what my original code was, but I do recall that I got rid of some inline styling and/or an internal stylesheet on the affected page  and added an ID to the main content area and some further CSS in the external stylesheet and now all works well on my desktop browsers as well as my Android browser.

In short, I am saying that I now recognise that while the Android browser has some wizard features that make zooming to parts of a page designed only for a large screen, it certainly has some idiosyncrasies when it comes to rendering certain code that works fine on desktop browsers.

The other point to make is that on my embedded applications almost all the faults I see are of the "column overflow" type where certain combinations of nested tags and styling are ignored. The problem appears particularly pronounced when images are within nested <div>s and of course, as it only affects embedded images, the handling of <iframe> code must be a factor.

There are certainly some real weird possibilities. In one case I loaded a page and was pleased to find that the text margins and images all neatly lined up as intended, but as I scrolled down, I realised that there were some gaps in the text where images should appear. I refreshed the page, only to find that the text re-flowed and now the right margin appeared to be in the middle of the screen instead of the right hand edge.

I guess what I'm saying is that if I were Nabble I'd be reluctant to spend a huge amount of time trying to fix some of these issues by re-coding my stuff, when it is quite likely that Android will deliver an update that will fix things for me.

However, I have just  googled "android browser bugs". There's lots of material to chew on. I guess it's time to go reading to see if there's any obvious tweaks that could be recommended for the standard core code at Nabble. :-(