在手机上使用 ssi 的网页上的空白答案

【问题标题】：Whitespace on webpage using ssi on phones在手机上使用 ssi 的网页上的空白
【发布时间】：2017-05-15 18:56:09
【问题描述】：

在我的网站https://traunviertler-traunwalchen.de/ 上，在移动设备上显示时有一个很大的空白（使用 WindowsPhone 10 和 Android 测试）。我还在 Windows 上测试了 Firefox 和 Edge，在 Linux 上测试了 Firefox。在这种情况下，没有出现空白。
该网站使用 SSI 来包含菜单、顶部的标题和一些元标记。由于使用了 SSI，因此出现了这个空白。
所有 html 页面均使用 UTF-8 编码，没有 BOM。
index.html：

<!DOCTYPE html>
<html lang="de">
    <head>
        <title>D&acute;Traunviertler Traunwalchen</title>
    </head>
    <body>
<!--#include virtual=/includes/body.shtml -->
        <main>
            <h1>A herzlichs Gria&szlig; God</h1>
            <figure id=logo>
                <img alt="Das GTEV Traunwalchen-Zeichen" src="/images/Design/logo400x343.png" />
                <figcaption>As GTEV D&acute;Traunviertler Traunwalchen Zoacha</figcaption>
            </figure>
...
        </main>
    </body>
</html>

body.shtml:

    <noscript>Um den vollen Funktionsumfang dieser Webseite zu erfahren, benötigen Sie JavaScript. Eine Anleitung wie Sie JavaScript in Ihrem Browser einschalten, befindet sich <a href="http://www.enable-javascript.com/de/" target="_blank">hier</a>.</noscript>
    <img src="https://www.browser-statistik.de/browser.png?style=0" alt="" />
    <script> 
        var $buoop = {vs:{i:13,f:-2,o:-2,s:9,c:-2},unsecure:true,api:4}; 
        function $buo_f(){ 
            var e = document.createElement("script"); 
            e.src = "//browser-update.org/update.min.js"; 
            document.body.appendChild(e);
        };
        try {document.addEventListener("DOMContentLoaded", $buo_f,false)}
        catch(e){window.attachEvent("onload", $buo_f)}
    </script>

【问题讨论】：

请在问题本身的minimal reproducible example 中包含所有相关代码，而不仅仅是在第三方网站上。

标签： html ssi

【解决方案1】：

有图片

https://www.browser-statistik.de/browser.png?style=0

在 noscript 标记之后，您的图像在移动设备上的宽度为 100%，这会导致问题。您实际上可以使用 chrome 检查它，只需模拟

如果您可以控制该图像，则向其添加一个类并设置不同的样式，或者您也可以像这样定位它

noscript + img {
    width: auto;
}

【讨论】：