修复 GitHub Pages 上 Jekyll 主题的页面宽度答案

【问题标题】：fixing page width of Jekyll themes on GitHub Pages修复 GitHub Pages 上 Jekyll 主题的页面宽度
【发布时间】：2018-12-15 11:19:30
【问题描述】：

当我在本地机器上进行开发时，$(window).width() 返回 ~1900px，当我将它推送到 GitHub 页面时，该值为 ~1200px（即使它在同一个浏览器窗口中） )。

到目前为止我已经尝试过： * 我已经阅读并实施了有关 style.scss 和默认主题的各种提示，但似乎没有影响。 * 我还清除了应用程序缓存，进行了硬刷新 * 正在使用提交消息来确保我正在查看正确的版本。

这是一个单一的平面页面，所以理想情况下它只是按原样呈现（没有 Jekyll 主题或任何东西）。

这是已发布的 GitHub 页面： https://greennomad424242.github.io/3d_data_viewer/?version=f13a77d

【问题讨论】：

标签： jekyll github-pages

【解决方案1】：

原来我的 atom live-server 将代码（包括在下面）注入到 HTML 中，而开发代码中没有显示该更改。

我不清楚为什么这会改变显示的窗口宽度，但这似乎是根本原因。

<!-- Code injected by live-server -->
<script type="text/javascript">
// <![CDATA[  <-- For SVG support
if ('WebSocket' in window) {
    (function() {
        function refreshCSS() {
            var sheets = [].slice.call(document.getElementsByTagName("link"));
            var head = document.getElementsByTagName("head")[0];
            for (var i = 0; i < sheets.length; ++i) {
                var elem = sheets[i];
                head.removeChild(elem);
                var rel = elem.rel;
                if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
                    var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
                    elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
                }
                head.appendChild(elem);
            }
        }
        var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
        var address = protocol + window.location.host + window.location.pathname + '/ws';
        var socket = new WebSocket(address);
        socket.onmessage = function(msg) {
            if (msg.data == 'reload') window.location.reload();
            else if (msg.data == 'refreshcss') refreshCSS();
        };
        console.log('Live reload enabled.');
    })();
}
// ]]>

【讨论】：