Make cnblogs mobile Compatible
Introduction
博客园的许多页面都是只支持PC的，没有手机端的，也没有手机端的app。每次查看都有放大了才能看清楚字体，手指和游泳似的，左右开弓，很不方便。还有上次我修改了theme之后，手机端看是很好了，不过还是没有自动放大到合适的大小。所以申请了JS权限，custom CSS，小搞一下。
Steps
- 添加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;
}
}
<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的更多相关文章
- [转] Understanding Twitter Bootstrap 3
Bootstrap is a popular, open source framework. Complete with pre-built components it allows web desi ...
- 30款javascript脚本插件 jquery插件大全
Shifty Nav - a Fully Responsive JS CSS3 Mega Menu Show Demo Shifty Nav is a fully responsive CSS3 ...
- genmotion 安装 app 报错 This application is't compatible with your mobile phone解决办法
请下载这个文件:http://pan.baidu.com/s/1jIyMNbg(一个zip包) 将这个zip包拖放到genymotion的屏幕中,安装,然后重启就行了 我安装的Samsung Gala ...
- jQuery Mobile入门
转:http://www.cnblogs.com/linjiqin/archive/2011/07/17/2108896.html 简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的 ...
- 分享自制的13套 JQuery Mobile 界面主题（追加4套新款）
15套整合在一起的,其中2套官方+13套自制,款款精致,方便移动开发. 字体默认为微软雅黑. 适配于 JQuery Mobile 1.4.3 下载地址:http://files.cnblogs.com ...
- poj 1195:Mobile phones（二维树状数组，矩阵求和）
Mobile phones Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 14489 Accepted: 6735 De ...
- poj 1195:Mobile phones（二维线段树，矩阵求和）
Mobile phones Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 14391 Accepted: 6685 De ...
- 经典收藏 50个jQuery Mobile开发技巧集萃
http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 1.Backbone移动实例 这是在Safari中运行的一款Ba ...
- (转)jQuery Mobile 移动开发中的日期插件Mobiscroll 2.3 使用说明
(原)http://www.cnblogs.com/hxling/archive/2012/12/12/2814207.html jQuery Mobile 移动开发中的日期插件Mobiscroll ...
随机推荐
- Entity Framework 基于方法的查询语法
实体框架(Entity Framework )是 ADO.NET 中的一套支持开发面向数据的软件应用程序的技术. LINQ to Entities 提供语言集成查询 (LINQ) 支持,它允许开发 ...
- 记一次程序排错与std::getline
今天忙活了半个下午,查找正式环境上面一个程序的问题.这个程序的作用是监控文件夹,处理每一个文件,分析每个文件的每行记录,然后将这个文件拆分成两个结果文件投放到另外两个不同的目录下面去,当处理完这个文件 ...
- C#中图片新增水印
/// <summary> /// 在图片上生成图片水印 /// </summary> /// <param name="Path">原服务器图 ...
- 总结-Hibernate
JPA 全称 Java Persistence API @Entity @Table(name = "user") public class User { @Id @Generat ...
- apachetop 实时监控apache指定日志
编译安装,压缩包戳我下载 帮助文档 # apachetop -h ApacheTop v0.12.6 - Usage: File options: -f logfile open logfile (a ...
- js windows.open()模拟POST提交
function openPostWindow (url,name, data1, data2) { var tempForm = document.createE ...
- Spark部署三种方式介绍：YARN模式、Standalone模式、HA模式
参考自:Spark部署三种方式介绍:YARN模式.Standalone模式.HA模式http://www.aboutyun.com/forum.php?mod=viewthread&tid=7 ...
- python垃圾回收机制的一些理解
概览: 主要通过 引用计数来进行垃圾收集, 就是说,当一个对象没有被其他对象引用的时候,会释放掉内存. 但是会有一些循环引用的对象,通过上面的方法,是没有办法清除掉的.所以,pyt ...
- 用Java实现网络爬虫
myCrawler.java package WebCrawler; import java.io.File; import java.util.ArrayList; import java.util ...
- cssSelector定位笔记1
cssSelector定位方法:1.使用class属性定位元素:driver.findElement(By.cssSelector("input.login"));即可以先指定一个 ...