博客園博客兼容手機瀏覽

1、動手實踐、改造博客園

先看一下博客園官方博客的手機版本，在Chrome裏面F12，使用移動模式。

今天看博客，看到呂大豹的文章：簡單兩步讓博客園支持手機端顯示， 以前本身把博客從博客園遷移到了github的issu中，也是考慮到博客園的博客不能很好的支持手機端瀏覽和評論。今天根據簡單兩步，確實把本身的博客能兼容手機顯示了，記錄一下。

個人博客模板是：http://www.cnblogs.com/SkinUser.aspx?SkinName=SimpleBlue

1.添加js代碼，參照呂的博客文章

 

2.添加CSS代碼。個人博客模板和呂的不一樣，因此我直接複製了CSS代碼，也作了一些改動。

1. 個人博客是左右兩欄，爲了分欄，右側的#mainContent有一個marin-left:300px的樣式，因此要去掉。
2. a連接有時太長，沒有換行顯示，須要加一段代碼。 a{word-wrap: break-word;}
3. 文章詳細頁，設計到廣告、評論框和分享panel使用了固定寬度，同一改爲了{width:100%;}，並且對廣告還添加了{overflow:hidden}。博客園官方後期能夠考慮把固定寬度的廣告都換成響應式的廣告。

 

body {
    font-family: "微軟雅黑",Arial,sans-serif;
    font-size: 14px !important;
}
div#license {
    background-color: #f8f8ee;
    border: solid 1px #e8e7d0;
    padding: 5px 10px 0px 10px;
    min-height: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    color: #666666;
}
.post {
    background-color: #fff;
    border: 1px solid #F5F5F5;
}
#cnblogs_post_body p {
    font-family: "微軟雅黑",Arial,sans-serif;
    font-size: 16px !important;
}
/*支持手機樣式*/
@media screen and (max-width: 768px) {
    #mainContent {
        margin-left: 0
    }
    a {
        word-wrap: break-word;
    }
    #main, #mainContent {
        width: 100%;
    }
    #sideBar, body > a, #navList, #navigator, .postDesc a, #homepage_top_pager {
        display: none;
    }
    #blogTitle a {
        font-size: 30px;
    }
    #blogTitle h2 {
        font-size: 16px;
    }
    #home {
        background-image: none;
    }
    .postTitle a {
        font-size: 22px;
    }
    .postCon, .postCon a {
        font-size: 16px;
    }
    .day {
        margin: 0 2%;
    }
    .postCon a {
        padding-left: 0;
    }
    .postDesc {
        width: 100%;
        font-size: 12px;
    }
    #home {
        background-color: #68BCCA;
    }
    #mainContent .forFlow {
        margin: 4px 0 0 0;
    }
    #blogTitle {
        left: 0;
    }
    #mainContent .postBody {
        width: 100%;
    }
    .post {
        padding: 0 4%;
    }
    #header {
        background-size: 46px;
    }
    .topicListFooter {
        width: 100%;
        text-align: center;
        padding: 0;
        height: 40px;
    }
    .topicListFooter a:link {
        font-size: 12px;
    }
/*文章詳細頁樣式*/
    #green_channel {
        width: 100%;
    }
    .c_ad_block {
        width: 100%;
        overflow: hidden;
    }
    #tbCommentAuthor,.commentbox_title,#tbCommentBody {
        width: 100%;
    }
}

 

2、效果展現

首頁顯示效果：

文章詳細頁-分享模塊：

文章詳細頁-評論模塊：

 

文章詳細頁-廣告：

 

3、總結

經過簡單的2個步驟，就實現了博客園能在pc和mobile設備下，正常訪問了。後續考慮看看是否有從博客園搬遷到github上的必要，由於自己博客園的用戶訪問量相對較多，有github帳戶的開發者仍是相對較少，並且以前積累博客園相關的經驗。技術改變生活。博客園官方是否能夠考慮給全部的主題模板作一個響應式設計改造，或者主題模板的製做者，上傳模板上來，就作好響應式設計。