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

  • 相关阅读:
    Jmeter运行badboy录制的脚本
    Bugfree安装与使用
    JMeter录制脚本
    第六天-linux系统优化初步讲解
    第五天-linux基础命令
    第四天-secureCRT-ssh客户端使用详解
    第三天-linux版本选择及安装
    第二天-计算机硬件基本知识和linux发展简史
    第一天-学习linux运维
    ubuntu15.04 无线上网问题
  • 原文地址:https://www.cnblogs.com/raybiolee/p/5904382.html
Copyright © 2011-2022 走看看