Web Mobile iPhone and Androids Inconsistencies

As I wrote in my profile, I am currently working as a Web Mobile Developer, focussed on high-end devices and will start to share my experiences and hacks to get the work done.

It has been a great experience working with HTML5, CSS3 and Javascript. Most people thinks this is all about rounded corner divs but we can build powerful web mobiles applications with HTML5 and CSS3.

Therefore nothing comes without some reasonable hassle. If you were one that complains about inconsistence on standard web site like Internet Explorer versus firefox, you need relax. You should be really happy where you are.

Web Mobiles is ten times more inconsistent than web for desktop. IPhones run safari mobile, which is not the same as safari desktop.  Androids behave slightly differently over device manufacturers (Eg.: annoying -webkit-tap-highlight-color css3 property) and totally different from iPhones.  


Please don't get me wrong: I love mobiles! that's why I didn't kill myself when I found out that safari mobile does not implement fixed position, neither div overlay scroll.

Can you do anything on web for desktop without fixed position and overflow scroll? In mobiles we have to do it. Find a good work-around is part of your role.

Worse yet, here comes safari mobile - the new Internet Explorer headache in mobiles.


But there are things that both iPhone and Androids sucks:

input type="search"

This code is supposed to give you that "clear on demand", the same on iphone apps but without any extra code. This is specified on HTML5 but they don't implement it.


Safari mobile does not implement overflow scroll for divs. Luckily there is the fantastic iScroll (http://cubiq.org/iscroll-4) that "fixes" this problem.


There are consistent things as well like geoLocation:

    navigator.geolocation.getCurrentPosition(foundLocationFunc, noLocationFunc); 

works for both devides and in a second you'll .


Next time I will share how to implement like a centralized spinner with a full screen semi-transparent overlay locking the page background. There are some tricks when the page is bigger than the screen and you have scroll.

Later on, I will share how to use full screen for iphone, take the most of this huge screen height.


cheers
Leonardo