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

问题描述：

在我的网站https://traunviertler-traunwalchen.de/在移动设备上显示时出现大的空白（使用WindowsPhone 10和Android进行测试）。我还在Linux和Windows上测试Firefox和Edge。在这种情况下，不会出现空白。
该网站正在使用SSI将菜单，标题以及一些元标记包括在内。自从使用SSI这个空白出现了。
所有的html页面都使用UTF-8编码，没有BOM。
的index.html：在手机上使用ssi的网页上的空白

<!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>

请在所有相关的代码不仅在第三方网站上，这个问题本身就是[mcve]。 –

答

有一个图像

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

noscript标记之后，你的图像是宽度100％上移动导致这个问题。实际上，你可以使用Chrome的检查，只是模拟

如果你可以控制图像，然后添加一个类，并以不同的风格，或者你也可以针对它像

noscript + img { 
    width: auto; 
}

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

相关推荐