View source for Mobile Devices

stuff we talked about at [[Midwest]] 2010.

==Basic techniques==
* choose device-specific CSS based on screen width:
  <LINK REL=StyleSheet HREF="desktop.css" TYPE="text/css" media="screen,projection,tv and (min-width: 501px)">
  <link rel="stylesheet" media="handheld, screen and (max-width: 500px)" href="smallscreen.css" type="text/css">

* or put the query in your css file;
  @media screen and (min-width: 400px) and (max-width: 700px) { ... }

* set the "viewport" on the device so the page scales to an appropriate size
  <meta name="viewport" content="width=device-width">

==OPACs==
* ''Notre Dame's mobile library interface'' from Boopsie ($$). Download free app:
http://hesburgh.boopsie.com
* ''Wittenberg's CSS-driven mobile-friendly web'' (test-port only right now):
http://ezra.wittenberg.edu:2082

==other sites==
* [http://m.infomotions.com/ Eric's mobile-friendly site] using webkit

==Resources==
* Stark, Jonathan. '''Building iPhone Apps with HTML, CSS, and JavaScript'''. O'Reilley (2009).
** some good info on general mobile web design techniques
* iPhone emulator online: http://testiphone.com/
* [http://sourceforge.net/projects/mitmobileweb/ MIT Mobile Framework]
* Webkit
* Drupal "Sections": different themes based on URL (e.g. "m.drupalsite.com" gets a different theme)