簡單兩步讓博客園支持手機端顯示

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

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;
    }
}