之前看到微軟的surface官方頁面（http://www.microsoft.com/surface/zh-cn），這種展現形式能夠在移動端上達到同樣的展示效果。
特意研究了一下他的寫法，首先在head標籤裏有
<meta name="viewport" content="width=device-width, initial-scale=1.0，minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
content裏的參數分別是：
width=device-width ：表示寬度是設備屏幕的寬度
initial-scale=1.0：表示初始的縮放比例
minimum-scale=1.0：表示最小的縮放比例
maximum-scale=1.0：表示最大的縮放比例
user-scalable=no：表示用戶是否可以調整縮放比例
在PC端上改變瀏覽器寬度達到一定像素會造成不同顯示效果，看了下他的寫法，是通過css的@media screen來實現的。
比如其中的：
@media all and (max-width:768px) {
.p2-table.desktop {
display:none
}
.p2-table.mobile {
display:table
}
}
很遺憾的是這樣的寫法不兼容IE6，7，8。
我嘗試用JQUERY來達到一樣的效果，PC端和移動端顯示效果一樣，並且要兼容IE6-8。
下面是我的代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=21.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var win_width;
changeNav();
$(window).resize(function (){
changeNav();
})
function changeNav(){
win_width = $(document).width();
if(win_width>400){
$(".nav1").show();
$(".nav2").hide();
}else{
$(".nav2").show();
$(".nav1").hide();
}
}
});
</script>
<style>
*{ padding:0; margin:0;}
.box{ width:100%; line-height:40px; font-size:40px; color:#FFF; font-weight:bold; background:#333; padding:10px 0;}
ul{ width:100%; overflow:hidden;}
li{ width:100%; padding:10px 0; line-height:24px; background:#069; font-size:24px; font-weight:bold; border-bottom:1px solid #CCC; color:#fff; text-align:center;}
.nav2{ display:none;}
.nav2 li{ background:#900; color:#999;}
</style>
</head>
<body>
<div class="box">GOOD</div>
<ul class="nav1">
<li>導航類型1</li>
<li>導航類型1</li>
<li>導航類型1</li>
</ul>
<ul class="nav2">
<li>導航類型2</li>
<li>導航類型2</li>
<li>導航類型2</li>
</ul>
</body>
</html>