html - Github Pages 仅在智能手机上存在 CSS 问题

Question

我正在使用 Jekyll 创建一个网站，并使用 Github 页面发布它。当我在本地 jekyll 服务 网站时，一切正常，而且从我的电脑和智能手机上看起来都很正常。但是当我从我的智能手机访问 Github 页面时，一些 div 似乎移动了一点，并且没有呈现字体很棒的图标。奇怪的是，当我从我的计算机访问它(Github 页面第一页)时它工作正常。

我不知道去哪里看。 github 上会发生什么事情并且只覆盖一些媒体查询吗？

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

这是 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(调整大小以匹配手机的尺寸):(确定)

令人惊讶的是，它似乎只出现在 Android 上的 firefox 上。我也在 iPhone 上试过，结果符合预期。为什么这只发生在 Github-pages 而不是我的本地服务器是最让我吃惊的。

编辑 2:

我刚刚比较了Github Pages生成的css和我服务器生成的css，除了一些换行符和空格外，它们是相同的。差异可能存在于 HTML 中吗？

Answer 1

我刚刚在 Ubuntu 上的 Firefox 38 上复制了这个。

在尝试查找 box-model 问题时，我在我的 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]

那么问题可能出在这里(see MDN documentation about MixedContent)。

因此，解决方案是通过 https 请求这三个资源。这确实适用于 https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css 的 Font-awesome|但不适用于 pure 文件 (NET::ERR_CERT_COMMON_NAME_INVALID)。

您必须将它们托管在您的服务器上或寻找其他通过 htpps 提供服务的提供商。