html - 页面加载后移动 View 变小

Question

我开发的其中一个网站有点问题。这个问题很简单，但是解决方案似乎有点难。

问题

问题是页面最初在移动设备上呈现时应该呈现的样子，但在页面加载完成后，页面会立即调整大小以适合视口(viewport)。没什么奇怪的，几乎每个无响应的网站都会发生这种情况。但奇怪的是，只有 75% 的可用宽度被使用。

我已经将设计的基础/切片版本与生产版本进行了比较。基于的版本确实按应有的方式呈现(100% 宽度)。我试图找出 CSS 中的差异，但我只能找到几个差异，我尝试重置它们，但没有用。

另外，我尝试禁用 javascript(它只是 Lightbox 和 1 个 JqueryUI“AddClass”效果)。 javascript 效果只有 1 个任务:页面加载后，标题将从 480px 调整为 220px 高度。页面上任何元素的宽度都没有发生变化。

最后但同样重要的是，我启动了 Adob​​e Edge Inspect 并查看了移动设备的页面源。但不幸的是，我无法在页面上发现任何超过“body”标签宽度的元素。唯一超过宽度的是标题图片，但图片在一个 div(100% 宽度)内并且 overflow:hidden

基础版和生产版

如果有人愿意看看是什么弄乱了渲染，那就太棒了。我似乎无法找出导致问题的原因。

基于(工作):http://www.nambi.nl/lefunq/生产(在移动设备上以 75% 宽度呈现):http://www.lefunq.com/_index.php

感谢所有花时间研究这个问题的人。

Answer 1

您的问题是由facepile代码引起的:

<div
  class="fb-facepile"
  data-href="http://www.facebook.com/pages/Le-Funq/113332665510819"
  data-size="large"
  data-max-rows="1"
  data-width="450"
></div>

更多信息:

一旦由于登录无效而无法加载 facepile，页面就会调整大小。一旦我登录到 facebook 并显示 facepile，页面就会按应有的方式拉伸(stretch)。我只需要找出导致奇怪缩放的原因，因为如果没有面板，它就是 0x0 div/iframe 等

解决方案:

我已经尝试了一些东西。 Onload 或 Onready 事件，以及隐藏或移除面板代码。最后，这些选项都没有奏效。缩放发生在面板完全加载之前。最终的解决方案是 javascript 解决方法，检查是否有移动设备，如果有，则禁用 facepile 代码:

  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) == false ) {
    document.write('<fb:facepile href="http://www.facebook.com/pages/Le-Funq/113332665510819" size="large" max_rows="1" show_count="false" width="450" class="facepile"></fb:facepile>');
  }

我在这个答案中找到了检测浏览器是否移动的方法:

What is the best way to detect a mobile device in jQuery?