Introduction
博客园的许多页面都是只支持PC的,没有手机端的,也没有手机端的app。每次查看都有放大了才能看清楚字体,手指和游泳似的,左右开弓,很不方便。还有上次我修改了theme之后,手机端看是很好了,不过还是没有自动放大到合适的大小。所以申请了JS权限,custom CSS,小搞一下。
Steps
- 添加CSS
@media screen and (max- 450px) {
body{
100% !important;
}
#home{
min-100% !important;
100% !important;
}
#header{
min-100% !important;
100% !important;
}
#blogTitle h1, #blogTitle h2{
100% !important;
}
#main{
min-100% !important;
100% !important;
}
.forFlow .day{
min-95% !important;
95% !important;
}
.postBody{
min-95% !important;
95% !important;
}
#topics .postTitle{
text-align:center;
}
#comment_form,
.commentbox_title{
min-95% !important;
95% !important;
}
div.commentform textarea.comment_textarea{
min-95% !important;
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>