簡單兩步讓博客園支持手機端顯示 - lvdabao－IT工程師數位筆記本

文章出處

博客園的模板是沒有兼容手機端顯示的，閱讀體驗比較差。本文教你如何簡單幾步讓你的博客支持手機端顯示。找一個夜深人靜，沒有人瀏覽你博客的時間點，開始吧。

1.添加js代碼

在博客園后臺的“設置”菜單下，有一項頁首Html代碼，此處寫js代碼也是可以生效的，將如下代碼復制過去：

<script>
var content = 'width=device-width, initial-scale=1 user-scalable=no';
var viewport = document.createElement('meta');
viewport.setAttribute('name', 'viewport');
viewport.setAttribute('content', content);
document.head.appendChild( viewport );
</script>

這段代碼創建了<meta>標簽，并且設置相應的viewport，讓網頁以設備寬度來渲染。

2.添加css代碼

還是“設置”菜單下，有頁面定制CSS代碼一項，在這里可以自定義你的css。由于我們要專門針對手機端寫css，所以要用到媒體查詢，把所有的css代碼都寫在這個區塊內：

@media screen and (max-width: 768px){
    /*自定義的css規則*/

｝

由于博客園的不同模板可能會有不同的html結構，所以并沒有一套通用的css樣式，所以具體的css得你自己動手來寫了。需要寫的大體包含以下內容：

隱藏側邊欄等無需在手機上顯示的元素
布局元素的寬度改為百分比的，如width: 100%
調整字體大小適應手機閱讀
微調各元素間距

最后，附上我博客的手機端css樣式，供大家參考：

@media screen and (max-width: 768px){
    #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;
    }
    #header{
        height: 180px;
    }
    #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;
    }
    .postBody{
        
    }
    #blogTitle{
        left: 0;
    }
    #mainContent .postBody{
        width: 100%;
    }
    .post{
        padding: 0 4%;
    }
    #header{
        background: url(http://images.cnblogs.com/cnblogs_com/lvdabao/507840/o_face-monkey-128.png) top right no-repeat;
        background-size: 46px;
    }
    .topicListFooter{
        width: 100%;
        text-align: center;
        padding: 0;
        height: 40px;
    }
    .topicListFooter a:link{
        font-size: 12px;
    }
}