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. Jackson

    Jackson可以轻松的将Java对象转换成json对象和xml文档,同样也可以将json.xml转换成Java对象. 1. 下载依赖库jar包 Jackson的jar all下载地址:http:// ...

  2. android删除无用资源文件的python脚本

    随着android项目的进行,如果没有及时删除无用的资源时安装包会越来越大,是时候整理一下废弃资源缩小压缩包了,少年! 其实判断一个资源(drawable,layout)是否没有被使用很简单,文件名( ...

  3. 百度地图API的IP定位城市和浏览器定位（转）

    百度地图API提供了Geolocation 和 LocalCity两个服务类. 这俩API可以分别供用户在JavaScript中进行定位和城市确认. 1 本质上,Geolocation这个类是使用了支 ...

  4. php套件 wampserver 常见问题

    安装问题 dll 丢失 今天手贱升级了win10,重新安装了一下php的套件,提示有几个组件找不到,其中有一个msvcr100.dll丢失. google了一下: youtube视频:Windows ...

  5. linq group by多个字段,返回多个字段.

    直接上例子.var wflist = from u in db.TWelFare where u.fy_no == fy_no orderby u.we_no group u by new { wen ...

  6. Win2008R2+java+tomcat安装

    Win2008R2+java+tomcat安装 准备软件: jdk-7u25-windows-x64.exe apache-tomcat-7.0.42-windows-x64.zip 一.安装java ...

  7. java关键字之final

    final表示不能修改. final修饰的方法不能被重写, final修饰的类不能被继承并且类里的所有方法都是final,成员变量可以是final或者不是final. final修饰的成员变量不可以改 ...

  8. weblogic

    停止(2) 更新 原路径 下一步 激活更新 启动(1)

  9. [Git] Ubuntu 升级 git 版本

    $ sudo add-apt-repository ppa:git-core/ppa $ sudo apt-get update $ sudo apt-get install git

  10. cygwin E437

    这个简单错误居然查到了 报错E437: terminal capability "cm" required 执行:# export TERM=xterm