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

Posted 吕大豹

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了简单两步让博客园支持手机端显示相关的知识,希望对你有一定的参考价值。

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

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

 

以上是关于简单两步让博客园支持手机端显示的主要内容,如果未能解决你的问题,请参考以下文章

彻查手机端浏览博客园出现广告一事!

博客园排版简单介绍

GShang博客园主题基础版本适配教程详解

博客园美化

(转)博客园登陆__JSEncrypt 分析

基于react-native实现的博客园手机客户端