Make cnblogs mobile Compatible

Introduction

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

Steps

添加CSS

@media screen and (max- 450px) {
    body{
         100% !important;
    }
    #home{
        min-100% !important;
        100% !important;
    }
    #header{
        min-100% !important;
        100% !important;
    }
    #blogTitle h1, #blogTitle h2{
        100% !important;
    }
    #main{
        min-100% !important;
        100% !important;
    }
    .forFlow .day{
        min-95% !important;
        95% !important;
    }
    .postBody{
        min-95% !important;
        95% !important;
    }
    #topics .postTitle{
        text-align:center;
    }
    #comment_form,
    .commentbox_title{
        min-95% !important;
        95% !important;
    }
    div.commentform textarea.comment_textarea{
        min-95% !important;
        95% !important;
        margin: 5px auto;
    }
}

<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