簡単な2つのステップはブログパークに携帯電話の表示をサポートさせます

ブログ園のテンプレートは携帯端末と互換性がなく、読書体験が悪い.この記事では、ブログが携帯電話の表示をサポートするように簡単にいくつかのステップを教えます.夜が更けて人が静かで、誰もあなたのブログを閲覧していない時点を探して、始めましょう.

1.jsコードの追加

ブログパークのバックグラウンドの「設定」メニューの下に、jsコードを書くと有効になります.次のコードをコピーします.

<span style="color:#0000ff;">var</span> content = 'width=device-width, initial-scale=1 user-scalable=no'<span style="color:#000000;">;
</span><span style="color:#0000ff;">var</span> viewport = document.createElement('meta'<span style="color:#000000;">);
viewport.setAttribute(</span>'name', 'viewport'<span style="color:#000000;">);
viewport.setAttribute(</span>'content'<span style="color:#000000;">, content);
document.head.appendChild( viewport );
</span>

このコードはラベルを作成し、対応するviewportを設定して、Webページをデバイス幅でレンダリングします.
 

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

 
転載先:https://www.cnblogs.com/lvdabao/p/5245247.html