今天在继续优化主题的时候，早上起床用手机看了一下牧风的网站，感觉有时候的确需要支持移动设备显示啊，因为即使不支持，当打开你的网站的时候，会看到密密麻麻整个网页，一点往下看的欲望都没有。但是你稍微一支持呢，人家偶尔用手机查看你的网站，可能还会多看几眼。所以今天下午的时候，就开始折腾开，最后在今天傍晚的时候，基本可以了。
唯一一个让我很抓狂的地方就是，在添加PHP设备判断函数以及修改完样式表css文件后，依旧还是不理解，所有工作基本都可以了，为啥还会有问题呢。真是抓狂啊。
最后问题落在viewport上，也就是可视区域。对于桌面浏览器，我们都很清楚viewport是什么，就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域，这是真正有效的区域。由于移动设备屏幕宽度不同于传统web,因此需要改变viewport。
我需要把对移动设备设备的设置让移动浏览器知道，发现问题，解决其实很简单，就在header里加几个meta即可，形如：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> //编码<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0;maximum-scale=1.0; user-scalable=no;"/><meta name=”apple-mobile-web-app-capable” content=”yes” /> // 离线应用的另一个技巧 <meta name=”apple-mobile-web-app-status-bar-style” content=black” /> // 隐藏状态栏 <meta content="black" name="apple-mobile-web-app-status-bar-style" /> //指定的iphone中safari顶端的状态条的样式 <meta content="telephone=no" name="format-detection" /> //告诉设备忽略将页面中的数字识别为电话号码
ok，基本上用移动设备浏览是没啥大问题了，就是再继续美化的事情了，等想折腾了再继续折腾吧。
更多资料可以参考：webkit webApp 开发技术要点总结
原文地址：网站添加移动设备显示效果, 感谢原作者分享。 三亚呀——赴一个蓝天碧海。
