How to: Mobile Layout Snaps Width

Question

I am trying to create a mobile web page layout similar to http://m.espn.go.com

What is nice about the site is that it re-sizes the width to fit the device's width. It snaps right to the correct size so that the user does not have to zoom in. It also uses a CSS drop-down effect.

I have searched around, and everything so far does not work the same as the ESPN site--meaning I have to zoom in, or it does not fit perfectly.

I have looked at the ESPN source code to learn how they accomplished this, but I cannot see how they are making the width re-size and the drop-downs to function.

1) Re-sizing In my own code, for the iPhone, I have added some Javascript to change the viewport size so that it will write out something like this:

<meta name="viewport" content="width=560">

However, it does not achieve the same effect.

2) Drop-down

It looks like they are using CSS for the drop-downs. It only works on a mobile device, which is curious, but fine.

<div class="dykHeader">Did you know?</div>
<div class="dykBody">The Diamondbacks set the single-season strikeout record (1,404) with 12 games remaining.</div>
<div class="shadow spacer"></div>
<div class="sec row" style="white-space: nowrap;"  ><a  class="white" id="Scores" >SCORES & SCHEDULES</a></div>
<div class="ind " style="white-space: nowrap;"  ><a  class="inline" href="../mlb/scoreboard?">MLB Scores</a></div>
<div class="ind alt bold" style="white-space: nowrap;"  ><a  class="inline" href="scoreboard?">ALL SCORES TODAY</a></div>
<div class="ind bold" style="white-space: nowrap;"  ><a  class="inline" href="sports?type=scores">SCORES BY SPORT</a></div>
<div class="sec row" style="white-space: nowrap;"  ><a  class="white" id="Hot" >WHAT'S HOT</a></div>
<div class="ind bold" style="white-space: nowrap;"  ><a  class="inline" href="/ncf/hotcorner?id=5537293&amp;i=HOT">Heisman Watch ></a></div>
<div class="ind alt bold" style="white-space: nowrap;"  ><a  class="inline" href="/wireless/hotcorner?id=4865778&amp;i=HOT">Five Minutes For The Fans: Kenny Chesney Edition ></a></div>
<div class="ind bold" style="white-space: nowrap;"  ><a  class="inline" href="/wireless/hotcorner?id=5046548&amp;i=HOT">What's Hot: More From ESPN ></a></div>

I do not see the styles for "sec row" anywhere in the internal or external style sheet.

Can anyone figure out what styles they are using to get the initial width to always be correct for Droid or iPhone?