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. Mybatis缓存处理机制

    一.MyBatis缓存介绍 正如大多数持久层框架一样,MyBatis 同样提供了一级缓存和二级缓存的支持 一级缓存: 基于PerpetualCache 的 HashMap本地缓存,其存储作用域为 Se ...

  2. centos6.7安装Redis

    1.创建安装目录 mkdir /usr/local/redis cd /usr/local/src 2.获取安装包:wget http://download.redis.io/releases/red ...

  3. HTTP常见头域

    近期没需求,也没什么心情去看书,就总结一下自己以前看的HTTP协议基础内容吧.(会很乱,可能不适合一点都没接触过HTTP协议的人观看) 一.HTTP Request header 1.Cache头域 ...

  4. Web测试的常用测试用例与知识

    1. Web测试中关于登录的测试 2. 搜索功能测试用例设计 3. 翻页功能测试用例 4. 输入框的测试 5. Web测试的常用的检查点 6. 用户及权限管理功能常规测试方法 7. Web测试之兼容性 ...

  5. iOS开发中的权限

    权限分类 联网权限 相册权限 相机.麦克风权限 定位权限 推送权限 通讯录权限 日历.备忘录权限 联网权限 引入头文件 @import CoreTelephony; 应用启动后,检测应用中是否有联网权 ...

  6. Python开发【十一章】：数据库操作Memcache、Redis

    一.Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的 ...

  7. gulp任务

    项目使用的gulp自动化任务 //定义输出文件夹名称 var distFolderH5 = "distH5"; var distFolderMofang = "distM ...

  8. SpringMVC常用配置-Controller返回格式化数据如JSON、XML的配置方式和机制

  9. VC工程中文件的编译顺序

    用联合编译工具能减少大量编译时间,然而如果工程里有个大型cpp文件,其他文件都编译好了只等着它... 两步解决问题: 1.将大文件分散到多个小cpp里面,加快并发,减少单个文件编译时间 2.优先编译大 ...

  10. 用Netty开发中间件：高并发性能优化

    用Netty开发中间件:高并发性能优化 最近在写一个后台中间件的原型,主要是做消息的分发和透传.因为要用Java实现,所以网络通信框架的第一选择当然就是Netty了,使用的是Netty 4版本.Net ...