To preface my post, I am not a web developer by any stretch. I have done a little css many years ago and picked it back up after quite a gap. I’ve learning the platform we use (.net) and reworked our site design with new css.
We’re happy for the most part with the end result on the desktop, but I’m trying to get mobile version worked out. I know I’ve seen so many posts and exhaustive work done to get it right. I took on this project to get us moving forward and honestly don’t know where to start looking for a solution to this problem as I’m not sure if it’s relative to something in Android or in the code.
I have some test pages built based on our current design but pointing at the new test style sheets for mobile, and every time I preview the test page(s) in the stock browser on Android devices running 4.0+, I get a lot of garbage. It almost looks like the page gets rendered twice by the browser as if there are two layers offset from each other slightly once loaded.
I’ve looked at it on the Galaxy S3 (two different ones on different carriers), Galaxy Nexus, an original Galaxy and I’m not sure of the exact model of Motorola, but it’s running Android 4.0.
The thing that’s strange is I downloaded Firefox on one of the S3’s and tested it. The test pages rendered perfectly as I expect to see them.
It also renders as I expected in other browsers running on older phones using Android 2.2 and 2.3 as well as iphones (except the 3g model – at least that’s what I’ve been able to test so far).
The test site pages also render properly on tablets I’ve tried (tested on Kindle Fire, ipad2, ipad,droid).
I’d appreciate any suggestions as to where to start to nail down the issue.
I do not have an Android device to test on right now so my observations are simply based on looking at your markup and CSS in a desktop browser and some things I’ve noticed that are strange in the code as a result of that exploration. Given that the site is functioning fine everywhere else, these might not be the reason for the inconsistencies you reported. I’ve been in some situations before where the way I solved it seamed to have no relevance to the actual issue. Even if my suggestions don’t end up resolving the weirdness, they are breeches of standards and might come back to bight you if you don’t fix them!
1. Correct me if I’m wrong but all your content looks to be wrapped in `