Introduction

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

Steps

  1. 添加CSS
  1. @media screen and (max-width: 450px) {
  2.     body{
  3.         width: 100% !important;
  4.     }
  5.     #home{
  6.         min-width:100% !important;
  7.         width:100% !important;
  8.     }
  9.     #header{
  10.         min-width:100% !important;
  11.         width:100% !important;
  12.     }
  13.     #blogTitle h1, #blogTitle h2{
  14.         width:100% !important;
  15.     }
  16.     #main{
  17.         min-width:100% !important;
  18.         width:100% !important;
  19.     }
  20.     .forFlow .day{
  21.         min-width:95% !important;
  22.         width:95% !important;
  23.     }
  24.     .postBody{
  25.         min-width:95% !important;
  26.         width:95% !important;
  27.     }
  28.     #topics .postTitle{
  29.         text-align:center;
  30.     }
  31.     #comment_form,
  32.     .commentbox_title{
  33.         min-width:95% !important;
  34.         width:95% !important;
  35.     }
  36.     div.commentform textarea.comment_textarea{
  37.         min-width:95% !important;
  38.         width:95% !important;
  39.         margin: 5px auto;
  40.     }
  41. }
  1. <head>添加viewport
  1. <script type="text/javascript">
  2. !(function(){
  3.   var viewPortTag=document.createElement('meta');
  4.   viewPortTag.id="viewport";
  5.   viewPortTag.name = "viewport";
  6.   viewPortTag.content = "width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0";
  7.   document.getElementsByTagName('head')[0].appendChild(viewPortTag);
  8. })();
  9. </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. js 获取指定日期

    查询几天后的js代码,如果查询当天的日期 if($("input[name='startTime']").val()==""){ $("input[n ...

  2. 函数Curry化

    之前写过一个函数Curry化的小文章 那会儿对Curry化的理解不够深,平时遇到的需要Curry化的例子也比较少,今天,重新整理这个问题 函数Curry化,其实就是将一个参数非常多的函数,在大多数参数 ...

  3. 加速下载gradle

    http://www.jianshu.com/p/e887203e30f6 另外idea runconfiguration里边 gradle project要选项目根目录,而不是build脚本.

  4. 如何优雅使用Sublime Text3（Sublime设置豆沙绿背景色和自定义主题）

    ♣Sublime Text3软件的下载 ♣设置字体的大小 ♣设置背景色和关键字颜色(Color Scheme 生成器) ♣快速生成html头文件 1.Sublime Text3软件的下载地址和包含的文 ...

  5. Oracle 教程

    视频教程 Oracle DBA数据库高级工程师职业学习指南与职业规划视频课程

  6. MYSQL 多行转多列

    mysql 行变列(多行变成一行/多行合并成一行/多行合并成多列/合并行),我觉得这都是一个意思 数据库结构如图: 而我想让同一个人的不同成绩变成此人在这一行不同列上显示出来,此时分为2中展现: 第一 ...

  7. 获取EMF文件内全部文字, 并按照左上到右下的顺序排序

    因为工作要求, 需要对EMF文件文字内容做分析.....SO, 如下代码出现了 懒得加注释了, 反正对外接口属性就那么几个, 根据英文猜吧, 很容易的 说明一下: 这个东西结果会对所有文字内容按照左上 ...

  8. 关于MVC4.0中@Styles.Render用法与详解

    本文分享于http://keleyi.com/a/bjac/q74dybjc.htm文章,感觉写的蛮好所以就拿过来做笔记了,希望对大家有帮助 最近公司的新项目用了MVC 4.0,接下来一步步把 工作中 ...

  9. 关于复选框input[type=checkbox]

    关于复选框input[type=checkbox],其实在前面的文章中说过一次,当时主要关注点在设置复选框的状态,利用prop实现,今天继续关注一下复选框. 自己在项目中,遇到一个全选/全不选的需求, ...

  10. gmc银联接口开发demo

    1.接口文档 1.1 无gmc界面接口 (dll/ocx) dll调用(posinf.dll)函数名为:int bankall (char * request,char *response),其中第一 ...