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. Git系列教程二 基础介绍

    一.存储方式 如果让我们设计一个版本控制系统,最简单的方式就是每做一次更改就生成一个新的文件. 这样的方式太占用空间,所以传统的版本控制系统都是保存一个文件的某个版本的全部内容以及其他版本相对于这个版 ...

  2. html css 样式继承的问题

    body 设置css中可以继承的属性:letter-spacing.word-spacing.white-space.line-height.color.font等 但有时,body的样式,不能在有的 ...

  3. 允许asp.net MVC报 错说明: 访问服务此请求所需的资源时出错。服务器可能未配置为访问所请求的 URL。错误消息 401.2。: 未经授权

    运行mvc3程序报以下错误 详细报错如下: “/”应用程序中的服务器错误. 访问被拒绝. 说明: 访问服务此请求所需的资源时出错.服务器可能未配置为访问所请求的 URL. 错误消息 401.2.: 未 ...

  4. DataBinding examples

    Databinding in Windows Forms demo (CSWinFormDataBinding) /************************************* Modu ...

  5. Tiddlywiki 维基程序使用手册

    文档 http://tiddlywiki.com/ http://web.nlhs.tyc.edu.tw/~lss/wiki/TiddlyWikiTutorialTW.html https://sit ...

  6. angular路由 模块 依赖注入

    1.模块 var helloModule=angular.module('helloAngular',[]); helloModule.controller('helloNgCrtl',['$scop ...

  7. python实现从生成器中取固定角标的元素

    #!/usr/bin/env python3 # -*- coding: utf-8 -*- class A: def __init__(self): def r(): i = 1 while Tru ...

  8. js正则匹配的一个日常应用

    应用实例 1 /** 将段落中的 \n 转换为 <p></p>, 规范存储 */ 2 function formatParagraphForStore(val) { 3 var ...

  9. Nginx配置加入css缓存配置后，css等文件not found

    现在配置: location / { root /root/html/product; } Probably another block had definition for the static f ...

  10. sublime通用快捷键 汉化 安装 插件

    Ctrl+Alt+P     切换项目 1.Ctrl+Shift+P     打开Package Control     Ctrl + Shift + P ,输入View, 选择Toogle Tabs ...