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 ...
随机推荐
- Jackson
Jackson可以轻松的将Java对象转换成json对象和xml文档,同样也可以将json.xml转换成Java对象. 1. 下载依赖库jar包 Jackson的jar all下载地址:http:// ...
- android删除无用资源文件的python脚本
随着android项目的进行,如果没有及时删除无用的资源时安装包会越来越大,是时候整理一下废弃资源缩小压缩包了,少年! 其实判断一个资源(drawable,layout)是否没有被使用很简单,文件名( ...
- 百度地图API的IP定位城市和浏览器定位(转)
百度地图API提供了Geolocation 和 LocalCity两个服务类. 这俩API可以分别供用户在JavaScript中进行定位和城市确认. 1 本质上,Geolocation这个类是使用了支 ...
- php套件 wampserver 常见问题
安装问题 dll 丢失 今天手贱升级了win10,重新安装了一下php的套件,提示有几个组件找不到,其中有一个msvcr100.dll丢失. google了一下: youtube视频:Windows ...
- linq group by多个字段,返回多个字段.
直接上例子.var wflist = from u in db.TWelFare where u.fy_no == fy_no orderby u.we_no group u by new { wen ...
- Win2008R2+java+tomcat安装
Win2008R2+java+tomcat安装 准备软件: jdk-7u25-windows-x64.exe apache-tomcat-7.0.42-windows-x64.zip 一.安装java ...
- java关键字之final
final表示不能修改. final修饰的方法不能被重写, final修饰的类不能被继承并且类里的所有方法都是final,成员变量可以是final或者不是final. final修饰的成员变量不可以改 ...
- weblogic
停止(2) 更新 原路径 下一步 激活更新 启动(1)
- [Git] Ubuntu 升级 git 版本
$ sudo add-apt-repository ppa:git-core/ppa $ sudo apt-get update $ sudo apt-get install git
- cygwin E437
这个简单错误居然查到了 报错E437: terminal capability "cm" required 执行:# export TERM=xterm