Yesterday I thought about adding a style sheet for mobile devices to some static HTML pages. How hard could it be? CSS has a media type. Just set the media to handheld, specify a style sheet for mobile browsers, and you’re done.
Style sheet media types
One problem is that hand-held devices don’t always look for the handheld style sheet. According to Ben Henick, the handheld media type is “poorly supported by all but the very recently marketed devices, as of 2009.” From what I gather, most websites try to infer the browser type on the server side and generate different HTML for mobile devices using PHP etc. Apparently static HTML markup will have its limitations at this point in time.
The iPhone doesn’t consider itself a hand-held device as far as CSS is concerned. Fair enough: perhaps the handheld designation is more for tiny screens like more traditional cell phones. But it’s not a desktop either.
You can’t target the iPhone with a simple media type, but you can use the following CSS.
<link rel="stylesheet" type="text/css" href="iphone.css"
media="only screen and (max-device-width: 480px)" />
Of course a device other than an iPhone could grab this style sheet, and the iPhone will not grab the style sheet if they ever add one more pixel to the browser width. But this is the approach Apple gives in their online documentation.
Testing
It’s difficult to find emulators to test how pages appear on mobile devices. Someone said on Stack Overflow that Opera has a Small Screen view that is useful for emulating mobile devices. However, that recommendation was from November 2008. The current version of Opera either no longer supports that feature or has moved it somewhere else.
The Web Developer plug-in for Firefox lets you specify whether you want to display your page with the screen or handheld style sheet, but it does not emulate a hand-held device.
Apple makes an emulator for the iPhone, but only for Macintosh computers. MobiOne makes an emulator for the iPhone that runs on Windows. However, the emulator does not recognize the CSS statement above. I don’t have an iPhone, but I was able to borrow an iPod Touch, which runs the same browser as the iPhone. My pages worked correctly on the iPod when they did not work on the MobiOne emulator.
Suggestions?
Does anyone have any suggestions for making static HTML pages more friendly to mobile browsers? Any suggestions for testing?
Sorry, my first comment was messed up. Here’s another try.
I don’t know about iPhone, but there is an emulator for Fennec (mobile version of Firefox,) an emulator for Opera Mobile and a simulator for Opera Mini (runs inside the browser, requires Java.)
You could also download and install the SDKs of Android and WebOS, which have full phone emulators, including the browsers. And unlike the iPhone SDK, they’re cross-platform.
Hope that helps.
I am currently a professional mobile developer specializing in iOS App Development. The company I work for also wants these apps to work on the other 2 market share leaders: Android and BlackBerry. My solution was to make the apps web based using HTML/HTML5, rather than being native apps coded specifically for each device’s OS. Standard HTML will work… HTML5 allows the app to be saved for use “offline” at a later date/time (using a ‘.manifest’ file).
The solution I came up with was to just keep all the content in a container div having width=”100%”. You must make sure to use CSS to set the margin and padding of the “body” to zero!
Try creating a page with background colour black, then adding a width=”100%” div with background color red. The div will have a height of zero if you don’t add some text (or anything really) to the div, so try adding the text: “Hello World!”. Upon loading the page in a mobile device, you should see a black page, with a red “banner” at the top containing the text “Hello World!”.
Also, “PhoneGap” simulator seems to work well for emulating different mobile devices!
-Chris Allinson
http://www.allinson.ca
Feb. 14th, 2011
I am currently a professional mobile developer specializing in iOS App Development. The company I work for also wants these apps to work on the other 2 market share leaders: Android and BlackBerry. My solution was to make the apps web based using HTML/HTML5, rather than being native apps coded specifically for each device’s OS. Standard HTML will work… HTML5 allows the app to be saved for use “offline” at a later date/time (using a ‘.manifest’ file).
The solution I came up with was to just keep all the content in a container div having width=”100%”. You must make sure to use CSS to set the margin and padding of the “body” to zero!
Try creating a page with background colour black, then adding a width=”100%” div with background color red. The div will have a height of zero if you don’t add some text (or anything really) to the div, so try adding the text: “Hello World!”. Upon loading the page in a mobile device, you should see a black page, with a red “banner” at the top containing the text “Hello World!”.
Also, “PhoneGap” simulator seems to work well for emulating different mobile devices!
-Chris Allinson
http://www.allinson.ca
Feb. 14th, 2011
I’ve used Opera Mobile from http://www.opera.com/mobile/
It’s probably better to use a media query that looks at screen size and not actual device. That way it’s scalable whether you make your browser smaller or whether you use a handheld.
This site uses media queries – http://colly.com/
And this site has a grid you can adapt with a media query too. http://cssgrid.net/
There is also a WordPress plugin – OnSwipe that will make your blog touch-device friendly, so it must scale it too. Okay, that’s enough. :-)
Actually, HD android smartphones report similar screen sizes to non-HD tablets!
Is there another solution (to detect tablet vs. smartphone)?!?
Using “navigator.userAgent” is useful for distinguishing:
iPhone
iPad
iPod
Android
blackberry
…
etc.
BUT, it doesn’t distinguish Android_Smartphone vs. Android_Tablet!!!
FAIL!
The http://colly.com site DOES NOT format properly on my HD mobile device (HTC Desire HD)!
I have to zoom out initially to view the site properly … FYI