I was confident the project we are doing will will render fine on the mobile browsers of any devices. Then when we are testing in on my Galaxy S3, I notice the condition my Jr. developer made for the CSS was not correctly triggered and I was not satisfied on the way the page was shown.
I asked, what was the problem, and according to my jr. developer: There was no way of knowing the size since every time a browser zooms, the pixel width in the viewport changes. Which was true, when we tested it on our desktops and also on Opera mobile browser emulator.
While searching for a solution online, I stumbled upon this page: http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/ where a list of most mobile devices and their viewport are listed. This is very helpful in determining the smallest width you have to look for on a device.
I gave them a solution to place a width on the smallest screen possible at the viewport meta and this fixed the problem. But being a stubborn subordinate; my jr. developer retained the current settings and just change the CSS. Adding another pixel condition to render properly on my device.
When I asked, why do it like that, the reason according to my jr. developer was that setting a specific size will not render correctly on iPhone. Since none of us owns an iPhone, we have to rely on the web on this findings. According to my jr. developer the mobile website will now render correctly on the 240 pixel viewport screen, that is good enough for me.
