博客在手機打開一直不能適配，手機上訪問的體驗很不好。今天把博客的大部分頁面都加了自適配手機端，只要修改每個頁面的css 即可。
之前大概知道怎么去改，但是頁面太多實在覺得麻煩，就一直沒有去改。當初做博客的時候也沒有考慮到手機訪問的重要性，所以現在雖然能改，但是也是縫縫補補。 一直想換一套模板的，又覺得要做的實在太多了。不過要想在手機上完美體驗還是需要重新做一套前端了，現在先這樣用着。
之前呢，考慮到很多人通過鏈接在手機上打開了我的博客，為了讓他們訪問加了個電腦訪問的提示。通過js判斷是否手機打開，如果是就彈窗提示。
<script type="text/javascript">
/* 手機打開提示 */
var mobileAgent = new Array("iphone", "ipod", "ipad", "android", "mobile", "blackberry", "webos", "incognito", "webmate", "bada", "nokia", "lg", "ucweb", "skyfire");
var browser = navigator.userAgent.toLowerCase();
var isMobile = false;
for (var i = 0; i < mobileAgent.length; i++) {
if (browser.indexOf(mobileAgent[i]) != -1) {
isMobile = true;
alert("本博客手機打開不適配，建議使用電腦訪問效果最佳！點擊確定繼續使用手機瀏覽");
break;
}
}
</script>
效果：
這樣肯定是不行的，還是得改css。html+css完全是靠在大學時老師教的那些撐着，一開始覺得完全夠用，后面發現很多東西老師沒有教過。接觸的越多發現要學的就越多，雖然是一個后端開發，但是該學的還是得學。css最煩的就是調來調去還差點的，特別是屏幕寬度，就很無語~
手機適配的話先加個meta viewport。移動端的布局不同於pc端，首先我們要知道在移動端中，css中的1px並不等於物理上的1px，因為手機屏幕的分辨率已經越來越高，高像素但是屏幕尺寸卻沒有發生太大變化，那就意味着一個物理像素點實際上塞入了好幾個像素。頭部加上viewport 並設置一些默認屬性。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
然后就是css判斷了，使用@media來判斷屏幕寬度，再調整響應模塊的scc。
/**手機適配**/
@media only screen and (max-width: 767px) {
header{width:100%}
.banner{width: 100%;height: 100px;}
.avatar{width: 80px;height: 80px;margin: 6px;}
.avatar a{padding-top: 59px;width: 80px;height: 80px;background-size: 80px 78px;}
.avatar a span{margin-top: 0px; padding-top: 0px; width: auto;height: auto;}
.bloglist h3 {margin: 20px 0 10px 10px;}
.bloglist figure {width:auto;margin-left: 4px;}
.bloglist figure img {width: 90px;height: 60px;}
.bloglist ul{width:64%}
.dateview {width:100%;padding-left:4px;}
.dateview span {margin: 0 3px;}
.weixinnone,.thumbs{display: none}
.right{width: 100%;margin-top: 22px}
.right ul{width:64%;margin-left: 22px;}
.weather{margin: 20px 50px;}
.bloglinkli{display: block}
footer{width:100%}
}
參考下面兩篇文章
viewport：viewport 深入理解
media：CSS3@media查詢
沒有適配手機之前的效果
首頁：
詳情頁：
做了適配之后的效果
首頁：
詳情頁：
