我的移动设备上的网站页脚不稳定

Question

我的网站http://galnova.com/ 刚刚进行了响应式升级。在浏览器上很好，但是当我在我的三星设备上查看它时，页面不会滚动并且它像疯了一样摇晃。我在页脚类或结构本身中找不到任何错误，但我很好奇为什么会发生这种情况。

<footer>
<div class="wrap">
<a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-nd/3.0/88x31.png" /></a><br />This work by <a xmlns:cc="http://creativecommons.org/ns#" href="http://www.galnova.com" property="cc:attributionName" rel="cc:attributionURL">Keith Jeter</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.en_US">Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License</a>.<!--<br />Based on a work at <a xmlns:dct="http://purl.org/dc/terms/" href="http://www.galnova.com" rel="dct:source">http://www.galnova.com</a>.-->

<p class="pull-right"><a href="#">Back to top</a></p>
<p>&copy; 2015 Galaxy Supernova &middot; <!--<a href="#">Privacy</a> &middot; <a href="#">Terms</a>--></p>
</div>
</footer>

Answer 1

尝试为您的页脚添加定义的高度并报告任何效果。

像这样：

@media (max-width: 767px)
    footer {
    border-radius: 0!important;
    border: none!important;
    margin: 0!important;
    height: 400px;
}

---

编辑：忽略上述；问题来自 Pirobox 覆盖插件。从 CSS 的角度来看，我注意到的一个快速修复方法是将 overflow: hidden 添加到 Pirobox stylesheet you reference 中的 .piro_html 类中，如下所示：

.piro_html {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    width: 500px;
    height: 500px;
    margin: 0;
    display: block;
    padding: 0;
    z-index: 150001;
    padding: 0;
    overflow: hidden;
}

这样做会导致您丢失小“X”封闭框，但由于您可以点击暴露的正文副本上的任何位置以逃离灯箱，这似乎是一种可接受且干净的解决方案。您还可以考虑使用 jQuery 代码。

让我知道这是否适合你。