Question

在我的网站上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>

Answer 1

有一张图片

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

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

如果您可以控制该图像，那么为其添加一个类并以不同方式设置它，或者您也可以将其定位为

noscript + img {
    width: auto;
}

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

1 个答案: