简单两步让博客园支持手机端显示

博客园的模板是没有兼容手机端显示的，阅读体验比较差。本文教你如何简单几步让你的博客支持手机端显示。找一个夜深人静，没有人浏览你博客的时间点，开始吧。

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