Make cnblogs mobile Compatible

Introduction

博客园的许多页面都是只支持PC的，没有手机端的，也没有手机端的app。每次查看都有放大了才能看清楚字体，手指和游泳似的，左右开弓，很不方便。还有上次我修改了theme之后，手机端看是很好了，不过还是没有自动放大到合适的大小。所以申请了JS权限，custom CSS，小搞一下。

Steps

  1. 添加CSS
@media screen and (max-width: 450px) {
    body{
        width: 100% !important;
    }
    #home{
        min-width:100% !important;
        width:100% !important;
    }
    #header{
        min-width:100% !important;
        width:100% !important;
    }
    #blogTitle h1, #blogTitle h2{
        width:100% !important;
    }
    #main{
        min-width:100% !important;
        width:100% !important;
    }
    .forFlow .day{
        min-width:95% !important;
        width:95% !important;
    }
    .postBody{
        min-width:95% !important;
        width:95% !important;
    }
    #topics .postTitle{
        text-align:center;
    }
    #comment_form,
    .commentbox_title{
        min-width:95% !important;
        width:95% !important;
    }
    div.commentform textarea.comment_textarea{
        min-width:95% !important;
        width:95% !important;
        margin: 5px auto;
    }
}
  1. <head>添加viewport
<script type="text/javascript">
!(function(){
  var viewPortTag=document.createElement('meta');
  viewPortTag.id="viewport";
  viewPortTag.name = "viewport";
  viewPortTag.content = "width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0";
  document.getElementsByTagName('head')[0].appendChild(viewPortTag);
})();
</script>

Results

mobile view

posted @ 2016-09-24 22:48  乌祁班岚图  阅读(161)  评论(0)  编辑  收藏  举报