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

Make cnblogs mobile Compatible的更多相关文章

  1. [转] Understanding Twitter Bootstrap 3

    Bootstrap is a popular, open source framework. Complete with pre-built components it allows web desi ...

  2. 30款javascript脚本插件 jquery插件大全

      Shifty Nav - a Fully Responsive JS CSS3 Mega Menu Show Demo Shifty Nav is a fully responsive CSS3 ...

  3. genmotion 安装 app 报错 This application is't compatible with your mobile phone解决办法

    请下载这个文件:http://pan.baidu.com/s/1jIyMNbg(一个zip包) 将这个zip包拖放到genymotion的屏幕中,安装,然后重启就行了 我安装的Samsung Gala ...

  4. jQuery Mobile入门

    转:http://www.cnblogs.com/linjiqin/archive/2011/07/17/2108896.html 简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的 ...

  5. 分享自制的13套 JQuery Mobile 界面主题（追加4套新款）

    15套整合在一起的,其中2套官方+13套自制,款款精致,方便移动开发. 字体默认为微软雅黑. 适配于 JQuery Mobile 1.4.3 下载地址:http://files.cnblogs.com ...

  6. poj 1195:Mobile phones（二维树状数组，矩阵求和）

    Mobile phones Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 14489   Accepted: 6735 De ...

  7. poj 1195:Mobile phones（二维线段树，矩阵求和）

    Mobile phones Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 14391   Accepted: 6685 De ...

  8. 经典收藏 50个jQuery Mobile开发技巧集萃

    http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 1.Backbone移动实例 这是在Safari中运行的一款Ba ...

  9. (转)jQuery Mobile 移动开发中的日期插件Mobiscroll 2.3 使用说明

    (原)http://www.cnblogs.com/hxling/archive/2012/12/12/2814207.html jQuery Mobile 移动开发中的日期插件Mobiscroll ...

随机推荐

  1. 205 Reset Content

    https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html The server has fulfilled the request and the ...

  2. SYMMETRIC MULTIPROCESSORS

    COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION As demands for perfor ...

  3. server与Portal联合，portal许可过期无法登录。

    server与Portal联合,portal许可过期无法登录,怎样解除联合. 解决方案由峥姐友情提供~~ (1)删除有两种方式(①/②选其一即可): ①类似 链接ttps://sunl.esrichi ...

  4. 带你玩转JavaWeb开发之六-mysql基本语法详解及实例(4)

    按照分类的名称统计每个分类商品所花的总钱数[排序查询] SQL中对查询的列进行排序,使用关键字order by.默认情况下是升序的排序(从小到大的排序顺序关键字 asc).使用降序排序需要使用关键字d ...

  5. CG_INLINE,inline 内联函数

    内联函数,即在编译的时候将函数体替换函数调用,从而不需要将parameter,return address进行push/pop stack的操作,从而加速app的运行,然而,会增加二进制文件的大小. ...

  6. +Load和+initialize方法解析

    http://www.cnblogs.com/ider/archive/2012/09/29/objective_c_load_vs_initialize.html

  7. JavaScript对象属性(一)

    对象object  对象和数组很相似,数组是通过索引来访问和修改数据,对象是通过属性来访问和修改数据的. 这是一个示例对象: var cat = { "name": "W ...

  8. 笔记 .Net反射机制

    .Net中反射机制, 一般常用的就是这两句: Type type=Assembly.Load("RoadFlow.Data."+dataType).GetType(typeName ...

  9. Spring Data JPA

    转自: http://www.cnblogs.com/WangJinYang/p/4257383.html Spring 框架对 JPA 的支持 Spring 框架对 JPA 提供的支持主要体现在如下 ...

  10. dynamodb golang query one Item

    golang  dynamodb  query  oneItem  and unmarshal  to object // +build example package main import ( / ...