Html Github仅在智能手机上显示css问题

我正在使用Jekyll创建一个网站，并使用Github页面发布它。当我

jekyll在本地为网站服务时，一切正常，从我的电脑和智能手机上看都很正常。但是，当我从智能手机访问Github页面时，一些div似乎发生了一些变化，字体图标也没有呈现出来。奇怪的是，当我从我的计算机访问它（Github第一页）时，它工作得很好

我不知道去哪里看。github上是否会发生某些情况并仅覆盖某些媒体查询

我还不知道代码中的相关内容，但我将尝试创建一些MCV示例。在此之前，源代码是，网站是

以下是CSS，主要取自纯CSS布局：



    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    /*
     * -- BASE STYLES --
     * Most of these are inherited from Base, but I want to change a few.
     */
        body {
            line-height: 1.7em;
            color: #7f8c8d;
            font-size: 13px;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        label {
            color: #34495e;
        }

        div.tweet-box {
            font-size: 20px;
            font-weight: bold;
            border-left: 3px solid #1f8dd6;
            padding: 1em 1.6em;
            font-weight: 100;
            border-radius: 5px;
            line-height: 1em;
        }

        .fat {
            font-weight: bold;
        }

        a.shy-link {
            text-decoration: none;
            color: #7f8c8d;
        }

        a:visited.shy-link{
            text-decoration: none;
            color: #7f8c8d;
        }

        a:hover.shy-link{
            text-decoration: none;
            color: #34495e;
        }

        .pure-img-responsive {
            max-width: 100%;
            height: auto;
        }

        /*
         * -- LAYOUT STYLES --
         * These are some useful classes which I will need
         */
        .l-box {
            padding: 0.4em;
        }

        .l-box-lrg {
            padding: 2em;
            border-bottom: 1px solid rgba(0,0,0,0.1);
        }

        .is-center {
            text-align: center;
        }



        /*
         * -- PURE FORM STYLES --
         * Style the form inputs and labels
         */
        .pure-form label {
            margin: 1em 0 0;
            font-weight: bold;
            font-size: 100%;
        }

        .pure-form input[type] {
            border: 2px solid #ddd;
            box-shadow: none;
            font-size: 100%;
            width: 100%;
            margin-bottom: 1em;
        }

        /*
         * -- PURE BUTTON STYLES --
         * I want my pure-button elements to look a little different
         */
        .pure-button {
            background-color: #1f8dd6;
            color: white;
            padding: 0.5em 2em;
            border-radius: 5px;
        }

        a.pure-button-primary {
            background: white;
            color: #1f8dd6;
            border-radius: 5px;
            font-size: 120%;
        }


        /*
         * -- MENU STYLES --
         * I want to customize how my .pure-menu looks at the top of the page
         */

        .home-menu {
            padding: 0.5em;
            text-align: center;
            box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
        }
        .home-menu {
            background: #2d3e50;
        }
        .pure-menu.pure-menu-fixed {
            /* Fixed menus normally have a border at the bottom. */
            border-bottom: none;
            /* I need a higher z-index here because of the scroll-over effect. */
            z-index: 4;
        }

        .home-menu .pure-menu-heading {
            color: white;
            font-weight: 400;
            font-size: 120%;
        }

        .home-menu .pure-menu-selected a {
            color: white;
        }

        .home-menu a {
            color: #6FBEF3;
        }
        .home-menu li a:hover,
        .home-menu li a:focus {
            background: none;
            border: none;
            color: #AECFE5;
        }


        /*
         * -- SPLASH STYLES --
         * This is the blue top section that appears on the page.
         */

        .splash-container {
            background: #1f8dd6;
            z-index: 1;
            overflow: hidden;
            /* The following styles are required for the "scroll-over" effect */
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            position: fixed !important;
        }

        .splash {
            /* absolute center .splash within .splash-container */
            width: 80%;
            height: 50%;
            margin: auto;
            position: absolute;
            top: 100px; left: 0; bottom: 0; right: 0;
            text-align: center;
            text-transform: uppercase;
        }

        /* This is the main heading that appears on the blue section */
        .splash-head {
            font-size: 20px;
            font-weight: bold;
            color: white;
            border: 3px solid white;
            padding: 1em 1.6em;
            font-weight: 100;
            border-radius: 5px;
            line-height: 1em;
        }

        /*
         * -- CONTENT STYLES --
         * This represents the content area (everything below the blue section)
         */
        @keyframes blink {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        .content-caret img {
            display: block;
            margin-right: auto;
            margin-left: auto;
            animation: blink 2s;
            animation-iteration-count: infinite;
        }

        .content-caret img.content-caret-bottom {
            animation-delay: 0.1s;
            transform: translate(0, -80%);
        }

        .content-caret img.content-caret-top {
            animation-delay: 0s;
        }

        .content-wrapper {
            /* These styles are required for the "scroll-over" effect */
            position: absolute;
            top: 87%;
            width: 100%;
            min-height: 12%;
            z-index: 2;
            background: transparent;
        }

        .content-wrapper-solid {
            background: white;
        }

        /* This is the class used for the main content headers () */
        .content-head {
            font-weight: 400;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin: 2em 0 1em;
            /*padding: 10px;*/

        }

        /* This is a modifier class used when the content-head is inside a ribbon */
        .content-head-ribbon {
            color: white;
        }

        /* This is the class used for the content sub-headers () */
        .content-subhead {
            color: #1f8dd6;
        }
        .content-subhead i {
            margin-right: 7px;
        }

        /* This is the class used for the dark-background areas. */
        .ribbon {
            background: #2d3e50;
            color: #aaa;
        }

        /* This is the class used for the footer */
        .footer {
            background: #111;
            font-size: 11px;
        }



        /*
         * -- TABLET (AND UP) MEDIA QUERIES --
         * On tablets and other medium-sized devices, we want to customize some
         * of the mobile styles.
         */
        @media (min-width: 48em) {

            /* We increase the body font size */
            body {
                font-size: 16px;
            }
            /* We want to give the content area some more padding */
            .content {
                padding: 1em;
            }

            /* We can align the menu header to the left, but float the
            menu items to the right. */
        .home-menu {
            text-align: left;
        }
        .home-menu ul {
            float: right;
        }

        /* We increase the height of the splash-container */
        /*    .splash-container {
        height: 500px;
        }*/

        /* We decrease the width of the .splash, since we have more width
        to work with */
        .splash {
            width: 50%;
            height: 50%;
        }

        .splash-head {
            font-size: 250%;
        }


        /* We remove the border-separator assigned to .l-box-lrg */
        .l-box-lrg {
            border: none;
        }

    }

    /*
     * -- DESKTOP (AND UP) MEDIA QUERIES --
     * On desktops and other large devices, we want to over-ride some
     * of the mobile and tablet styles.
     */
        @media (min-width: 78em) {
            /* We increase the header font size even more */
            .splash-head {
                font-size: 300%;
            }
        }



编辑：
这里有一些图片来解释我的意思

从Android默认浏览器（似乎不支持CSS3转换和转换）：（OK）


Android上的Firefox:（没有标题，奇怪的蓝色条：不正常）


从我的桌面的Firefox（调整大小以匹配手机的尺寸）：（OK）


令人惊讶的是，它似乎只出现在Android上的firefox上。我还在iPhone上试过，结果和预期的一样。最让我吃惊的是，为什么这只发生在Github页面上，而不发生在我的本地服务器上

编辑2:

我刚刚比较了Github页面生成的css和我的服务器生成的css，除了这里和那里的一些换行符和空格外，它们是相同的。这种差异可能存在于HTML中吗？
我刚刚在Ubuntu上的Firefox38上复制了这一点

当我试图找到一个
盒子模型
问题时，我在我的Firefox安全控制台中看到：

Blocked loading mixed active content "http://yui.yahooapis.com/pure/0.6.0/pure-min.css"[Learn More] nicowcow.github.io
Blocked loading mixed active content "http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css"[Learn More] nicowcow.github.io
Blocked loading mixed active content "http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"[Learn More]

那么问题可能就在这里（）

因此，解决方案是通过https请求这三个资源。
这确实适用于字体，但不适用于
pure
文件（NET:：ERR\u CERT\u COMMON\u NAME\u无效）

您必须将它们托管在您的服务器上，或找到另一家通过htpps提供服务的提供商。
您所说的转移是什么意思？。你能添加一个屏幕截图吗？很遗憾，我现在不能，但是
内容包装器
div似乎与屏幕宽度不完全匹配，因此侧面出现了一个2-3像素的条。你是说推特框左侧的蓝色条吗？@Erikgillesie:不，这是应该存在的。我马上上传一张图片。代码片段不完整，没有html。如果您希望只提供CSS部分，请将其作为问题描述中的普通代码块。您是非常正确的。它根本不取决于浏览器，而是取决于是否使用http或https访问页面。谢谢！