Question

我在我开发的其中一个网站上遇到了一些问题。问题很简单，但解决方案似乎有点困难。

问题

问题是页面正在呈现，因为它应该首先在移动设备上呈现，但在页面加载完成后，页面会调整大小以适合视口。没什么奇怪的，这几乎发生在每个没有响应的网站上。但奇怪的是，只有75％的可用宽度正在使用。

我已经将设计的基础/切片版本与生产版本进行了比较。基础版本确实渲染（100％宽度）。我试图发现CSS中的差异，但我只能找到一对，我尝试重置这些，但这不起作用。

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

最后但并非最不重要的是，我启动了Adobe 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，页面就会按照应有的方式进行拉伸。我只需要找出造成奇怪缩放的原因，因为如果没有facepile，那就是0x0 div / iframe等等。

<强>解决方案：

我尝试过几件事。 Onload或Onready个事件，以及隐藏或删除facepile代码。最后，这些选项都没有奏效。缩放发生在facepile完全加载之前。最终解决方案是一个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?

Answer 2

我在Android 2.3.7上试过原生浏览器，Firefox和Dolphin。

两页都以100％缩放渲染，完全加载页面后缩放不会改变。

我认为此问题特定于您设备的软件。

页面加载后移动视图变小

2 个答案: