Wednesday, January 25, 2012

DOCTYPE Mobile

It took more than a day...

I was implementing mobile view of our internet-facing web site, which is on MS SharePoint 2010.

The page’s computed width gets 980px. But I could not find out where it comes from.

We had design company prepared their designs in HTML. So my task should not have been much more than a copy and paste. However, SP pages generated based on my mobile master page (basically of copy and paste) gets its computed width as 980px. Consequently, the contents gets all too small to read, while the HTML given by the design company shows nicely on mobiles.

Towards the end of a fruitless day, I noticed that the DOCTYPE definitions are different.

I did this mobile master page, based on that for PCs, which contains those SP controls and all. Its DOCTYPE is the usual:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

and I did not think I need to change this.

One defined in the design company’s HTML is:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

With it, my SP pages look now OK on mobiles.

I am not an authority or anything. Do not know anything about the wapforum. I am writing this here just hoping that it may help you there tearing your hairs, not understanding where the hell the 980px width is coming from.