zoukankan      html  css  js  c++  java
  • Make cnblogs mobile Compatible

    Introduction

    博客园的许多页面都是只支持PC的,没有手机端的,也没有手机端的app。每次查看都有放大了才能看清楚字体,手指和游泳似的,左右开弓,很不方便。还有上次我修改了theme之后,手机端看是很好了,不过还是没有自动放大到合适的大小。所以申请了JS权限,custom CSS,小搞一下。

    Steps

    1. 添加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;
        }
    }
    
    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

    mobile view

  • 相关阅读:
    操作winrar
    lucene.NET详细使用与优化详解
    js实现记住帐号或密码(js读写COOKIE)
    jQuery对select操作小结
    XMLHelper
    AJAX2用法
    as3Crypto and php, what a fun ride!
    linux文件描述符导致squid拒绝服务
    Centos 增加硬盘
    安装Squid log analyzer分析工具
  • 原文地址:https://www.cnblogs.com/raybiolee/p/5904382.html
Copyright © 2011-2022 走看看