What are the basics for creating a web page for a mobile device? I'm developing a simple page with a table and several links, but when I open it with my Android phone it is too small, and I have to zoom in to see it clearly. Normally when I access a page ready for mobile devices I can see it fairly clearly to begin with.
How can I do that?
Cheers.
You can start by adjusting your CSS rules and using the right meta tags:
http://learnthemobileweb.com/2009/07/mobile-meta-tags/
http://building-iphone-apps.labs.oreilly.com/ch02.html#ch02_id35932248
That will solve the resizing problem. For further references you can read some chapters of this book: http://building-iphone-apps.labs.oreilly.com/
which is aimed to develop webapps for iPhone, but (since iPhone and Android both use webkit browsers) can be very useful for Android too.
If you want to build rich-featured web app you can then take a look at PhoneGap http://www.phonegap.com/
A lot of it depends on your display size. If you're not building the website to fit a specific screen size, it will (many times) default to a standard browser resolution. Try setting your body element's CSS height and width to something appropriate for your Android phone and reloading the page.
Once you have the right size in mind, it's just like building any other website.
Did you set your doctype to xhtml mobile?
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml- mobile10.dtd">
