Simple two-step blog Park support mobile phone display

Blog Park template is not compatible with mobile phone-side display, the reading experience is relatively poor. This article teaches you how to make your blog support mobile display in a few simple steps. Looking for a dead night, no one to browse your blog point in time, start it.

1. Add JS Code

In the background of the blog park under the "Settings" menu, there is a page of the first HTML code , where the JS code can also be effective, the following code copied the past:

<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);d Ocument.head.appendChild (viewport); </script>

This code creates a <meta> tag and sets the appropriate viewport to render the page as a device width.

2. Add CSS Code

Or the "Settings" menu, there is a page custom CSS code , where you can customize your CSS. Since we want to write CSS specifically for the mobile phone, so we need to use the media query, all the CSS code is written in this block:

@media screen and (max-width:768px) {/    * custom CSS Rule */}

Because the different templates of the blog park may have different HTML structure, so there is not a common set of CSS style, so the specific CSS you have to write your own. What you need to write roughly includes the following:

• Hide Sidebar and other elements that don't need to be displayed on your phone
• Change the width of the layout element to a percentage, such as width:100%
• Adjust font size to suit your phone's reading
• Fine-Tune each element spacing

Finally, attached to my blog's mobile phone-side CSS style, for your reference:

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

Simple two-step blog Park support mobile phone display