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. FAT32文件系统

  2. SqlServer 笔记一 某表中每个月的产品数量（DATENAME() 与 DATEPART()、YEAR()）

    1.使用 DATENAME() 函数 SELECT DATENAME(yyyy, [columnName]) + '/' + DATENAME(mm, [columnName]) AS monthDa ...

  3. Oracle数据库基础知识2

    字符操作相关_1 1.CONCAT关键字作用:连接字符串语法:CONCAT(字串1, 字串2)例如: CONCAT('hello','world') FROM DUAL; 注意:Oracle的CONC ...

  4. JavaScript数据类型 typeof, null, 和 undefined

    JavaScript 数据类型 在 JavaScript 中有 5 种不同的数据类型: string number boolean object function 3 种对象类型: Object Da ...

  5. CentOS 下部署 ASP.NET Core环境

    一.安装dotnet 1.下载运行环境 https://www.microsoft.com/net/download/linux 下载Runtime:https://go.microsoft.com/ ...

  6. SQL学习整理_2

    字符串处理,字符串函数不会改变存储在表中的数据内容,他们只是把函数结果当成查询结果返回. 1. SELECT right(name,2) FROM my_list   --从my_list列表中取出n ...

  7. .net使用OpenPop自动收邮件，并将邮件内容存入数据库

    1.下载OpenPop,将OpenPop添加到解决方案中. 2. else if (e.CommandName == "ConnectTest") { string sSERVER ...

  8. java 读写文件

    1. 读文件 import java.io.*; import java.util.*; public class test { public void test_readfile(String fi ...

  9. iOS - UIButton折行文字显示设置

    首先在控制器中创建一个button - (void)viewDidLoad { [super viewDidLoad]; UIButton * button = [[UIButton alloc] i ...

  10. goim 及时消息 集成

    https://github.com/roamdy/goim-oc-sdk goim 及时消息 集成