这两天做了下公司的手机网页，尽管简单，可是学到不少东西，学知识还是得有工作要求才有动力啊，下面写下心得：
整体布局宽度不能用固定像素的，要用百分比
CSS视区(viewport)：<meta name="viewport" content="width=device-width,user-scalable=0, initial-scale=1, maximum-scale=1,minimum-scale=1" />
width=device-width意思是宽度是自动是设备宽度，user-scalable=0是表示是否允许缩放,1可以 0不可以， initial-scale=1, maximum-scale=1,minimum-scale=1分别代表初始缩放比例、最大、最小缩放比例
<meta name="format-detection" content="telephone=no" />不允许用户使用页面中的电话号码
<meta name="apple-mobile-web-app-capable" content="yes" />http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html 是否允许全屏模式 苹果设备下
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> safari顶部栏的样式
<script>
// When ready...
window.addEventListener("load",function() {
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
});
</script>
上面的脚本是safari进入网站时自动隐藏顶部导航栏
css@mediahttp://www.w3.org/TR/CSS2/media.html#media-types
过程中参考的网址：https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
http://www.blueidea.com/tech/web/2010/7912.asp
http://www.1stwebdesigner.com/tutorials/mobile-version-website/
http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts
http://www.smashingmagazine.com/guidelines-for-mobile-web-development/
http://www.w3.org/TR/css3-mediaqueries/
http://matthewjamestaylor.com/blog/perfect-full-page.htm
第一次写博客，其中免不了有错误，仅供参考，如果误导了别人，请见谅