博客園博客兼容手機瀏覽

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

先看一下博客園官方博客的手機版本，在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個步驟，就實現了博客園能在pc和mobile設備下，正常訪問了。后續考慮看看是否有從博客園搬遷到github上的必要，因為本身博客園的用戶訪問量相對較多，有github賬戶的開發者還是相對較少，而且之前積累博客園相關的經驗。技術改變生活。博客園官方是否可以考慮給所有的主題模板做一個響應式設計改造，或者主題模板的制作者，上傳模板上來，就做好響應式設計。