?這兩天做了下公司的手機網頁，盡管簡單，可是學到不少東西，學知識還是得有工作要求才有動力啊，下面寫下心得：

整體布局寬度不能用固定像素的，要用百分比

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://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

http://www.w3.org/TR/css3-mediaqueries/

http://matthewjamestaylor.com/blog/perfect-full-page.htm

?

第一次寫博客，其中免不了有錯誤，僅供參考，如果誤導了別人，請見諒

?

轉載于:https://www.cnblogs.com/frontender/archive/2013/04/02/2995582.html

總結

以上是生活随笔為你收集整理的移动简单网站开发遇到的问题，备忘或者分享的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。