Supporting a mobile layout combined with a fixed-width desktop/tablet layout can be a bit challenging. This is what I've come up with to solve the problem.

viewport.html

<!--

  This is the mobile viewport setting. iOS 5 has a bug that
  does some goofy scaling when you rotate it unless you set
  the max scale to 1. We could do a one-off for this,
  but it doesn't seem worth it.

-->
<meta id="meta-viewport" name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1">
<script>
// Some browsers incorrectly return the layout viewport
// for window.innerWidth and screen.width, so we set the
// viewport as device-width, calculate the screen width,
// then re-set the viewport dimensions.
// 
// http://www.quirksmode.org/mobile/tableViewport.html
//
// 768 is the (somewhat arbitrary) breakpoint that defines
// a mobile screen.
//
if (window.innerWidth >= 768) {
  // This width should be the most comfortable width for the desktop
  // layout. Nothing magical about 1024, other than it's the native width
  // of a landscape iPad, so scaling is easier.
  document.getElementById("meta-viewport").setAttribute("content", "width=1024,initial-scale=1,user-scalable=yes");
}
</script>