When we are talking about inconsistencies across multiple mobile devices, what we are really talking about is CSS. In the past, mobile devices had incredibly poor support for CSS, using it as nothing more than a way to style text and apply background colors. Though many of today’s mobile browsers have far better support for both CSS2 and CSS3 than their predecessors, there are still plenty of legacy mobile browsers in the market to contend with.
Designing your CSS to work across multiple mobile browsers isn’t easy and can be quite a painful process. There is no one perfect way to create CSS that renders consistently on more than a handful of devices. I have three techniques I use, depending on the devices I intend to support:
Keeping your styles very basic, using no complex styling techniques whatsoever, can be the ideal method for simple sites. Though it may not be pretty to look at, it works.
In this approach, you constantly test how your styles render on devices. For each code change, you reload the browser on each device you plan to support. This approach is slow and tedious, but it means fewer issues toward the end of the project.
As I discussed before, this approach requires you to create multiple layers of support, so that your style gracefully degrades depending on the device. This technique takes some practice to get right, but if you can master it, it can be a powerful approach.