尝试做手机站已经一段时间，总结了几点经验，希望对大家有帮助。
1. Viewport 视窗
这可以说是手机版和电脑版网站最大的不同。
电脑版显示的是物理分辨率，比如你的网站设计宽度为1024,那么在宽屏显示器就会两边留空，这是我们一直的做法。
但是手机网站你设计宽度320，在640分辨率的手机只显示一半那显然是不对的，手机屏幕小应该尽可能利用空间，让320填充满整个屏幕，所以引进了Viewport的概念。
解决方案一，设计固定宽度，比如320，在<head>标签里面加入
<meta name=”viewport” content=”width=320″>
解决方案二，设计宽度100%，在<head>标签里面加入
<meta name=”viewport” content=”width=device-width,user-scalable=no” />
2. 响应式设计
原理是在屏幕宽度小于某个值的时候，使用特定的css，这样可以实现一套html就同时支持电脑和手机。
电脑版的css照常写，在底部媒体相应，然后在括号内写手机版特定的css，一般就是页面宽度改小，去掉浮动，隐藏不必要的内容。
@media all and (max-width: 1000px) {
}
3. JS判断是否手机浏览
如果你不采用响应设计，而是想做两套html，可以用这个方法。
原理是当手机访问的时候，自动跳到手机版的地址
<script type=”text/javascript”>
function browserRedirect() {
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == “ipad”;
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == “iphone os”;
var bIsMidp = sUserAgent.match(/midp/i) == “midp”;
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == “rv:1.2.3.4”;
var bIsUc = sUserAgent.match(/ucweb/i) == “ucweb”;
var bIsAndroid = sUserAgent.match(/android/i) == “android”;
var bIsCE = sUserAgent.match(/windows ce/i) == “windows ce”;
var bIsWM = sUserAgent.match(/windows mobile/i) == “windows mobile”;
if ((bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) ){
window.location.href=”http://www.globebill.com.cn/m/”;
}
}
browserRedirect();
</script>
