Github仅在智能手机上页面CSS麻烦

尼古拉斯·马蒂亚(Nicolas Mattia)

我正在使用Jekyll创建网站,并使用Gi​​thub页面发布它。当我jekyll serve在本地访问网站时,一切正常,并且从我的计算机和智能手机来看都正常。但是,当我从智能手机访问Github页面时,某些div似乎有些移动,并且字体真棒图标未呈现。奇怪的是,当我从计算机上访问它(Github页面一)时,它工作正常。

我不确定要看哪里。可以在github上发生什么并且仅覆盖某些媒体查询吗?

我还不知道代码中有什么相关,但是我将尝试创建一些MCV示例。在此之前,源代码在这里,网站在这里

这是CSS,主要取自Pure 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默认浏览器

从Android上的Firefox :(没有标题,怪异的蓝色条:不确定

Android的Firefox

从我桌面的Firefox(调整大小以匹配手机尺寸):(确定

Debian Firefox

令人惊讶的是,它似乎仅在Android的firefox上发生。我也在iPhone上尝试过,结果与预期的一样。为什么只在Github页面上发生而不是在我的本地服务器上发生,这是令我最震惊的事情。

编辑2:

我只是比较了Github Pages产生的CSS和服务器产生的CSS,除了在这里和那里的一些换行符和空格外,它们是相同的。区别可能在于HTML吗?

大卫·雅克

我刚刚在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]

然后问题可能就在这里(请参阅有关MixedContent的MDN文档)。

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

您将不得不将它们托管在您的服务器上,或找到另一个通过htpps服务的提供程序。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何仅在智能手机上编码Bootstrap手风琴

来自分类Dev

获取1200像素页面以在智能手机上正确显示

来自分类Dev

Bootstrap布局在智能手机上过宽

来自分类Dev

OOP设计与智能手机上的性能

来自分类Dev

在智能手机上运行VBA

来自分类Dev

HTML和CSS布局在智能手机上无法正确显示

来自分类Dev

我在智能手机上没有任何CSS

来自分类Dev

自适应CSS在智能手机上不起作用

来自分类Dev

为什么我的智能手机不再呈现 Github 页面?

来自分类Dev

joomla,CSS-仅在智能手机屏幕上显示joomla模块

来自分类Dev

joomla,CSS-仅在智能手机屏幕上显示joomla模块

来自分类Dev

CSS 媒体智能手机

来自分类Dev

CSS媒体查询在Sony Xperia Z智能手机上不起作用

来自分类Dev

CSS媒体查询在Sony Xperia Z智能手机上不起作用

来自分类Dev

android智能手机上的固定宽度html布局

来自分类Dev

防止在智能手机上滚动特定屏幕尺寸

来自分类Dev

除非已缓存,否则SVG图片不会在智能手机上加载

来自分类Dev

如何在智能手机上相邻显示两个div?

来自分类Dev

React网站按钮和输入在智能手机上不起作用

来自分类Dev

为什么程序在特定的智能手机上抛出OutOfMemoryError?

来自分类Dev

使用Three.js对球体进行纹理处理无法在智能手机上使用

来自分类Dev

智能手机上的位置服务-它使用哪个物理网络?

来自分类Dev

在智能手机上安装两个操作系统

来自分类Dev

返回浏览器时,PHP会话在智能手机上丢失

来自分类Dev

智能手机上的媒体查询网站视图

来自分类Dev

android应用未出现在智能手机上

来自分类Dev

使用相机在Android智能手机上进行心率监测

来自分类Dev

避免在智能手机上自动下载pdf

来自分类Dev

引导A标签在平板电脑和智能手机上不起作用

Related 相关文章

  1. 1

    如何仅在智能手机上编码Bootstrap手风琴

  2. 2

    获取1200像素页面以在智能手机上正确显示

  3. 3

    Bootstrap布局在智能手机上过宽

  4. 4

    OOP设计与智能手机上的性能

  5. 5

    在智能手机上运行VBA

  6. 6

    HTML和CSS布局在智能手机上无法正确显示

  7. 7

    我在智能手机上没有任何CSS

  8. 8

    自适应CSS在智能手机上不起作用

  9. 9

    为什么我的智能手机不再呈现 Github 页面?

  10. 10

    joomla,CSS-仅在智能手机屏幕上显示joomla模块

  11. 11

    joomla,CSS-仅在智能手机屏幕上显示joomla模块

  12. 12

    CSS 媒体智能手机

  13. 13

    CSS媒体查询在Sony Xperia Z智能手机上不起作用

  14. 14

    CSS媒体查询在Sony Xperia Z智能手机上不起作用

  15. 15

    android智能手机上的固定宽度html布局

  16. 16

    防止在智能手机上滚动特定屏幕尺寸

  17. 17

    除非已缓存,否则SVG图片不会在智能手机上加载

  18. 18

    如何在智能手机上相邻显示两个div?

  19. 19

    React网站按钮和输入在智能手机上不起作用

  20. 20

    为什么程序在特定的智能手机上抛出OutOfMemoryError?

  21. 21

    使用Three.js对球体进行纹理处理无法在智能手机上使用

  22. 22

    智能手机上的位置服务-它使用哪个物理网络?

  23. 23

    在智能手机上安装两个操作系统

  24. 24

    返回浏览器时,PHP会话在智能手机上丢失

  25. 25

    智能手机上的媒体查询网站视图

  26. 26

    android应用未出现在智能手机上

  27. 27

    使用相机在Android智能手机上进行心率监测

  28. 28

    避免在智能手机上自动下载pdf

  29. 29

    引导A标签在平板电脑和智能手机上不起作用

热门标签

归档