6

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

问题

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

我已经将设计的基础/切片版本与生产版本进行了比较。基础版本会按应有的方式渲染（100% 宽度）。我试图找出 CSS 中的差异，但我只能找到几个，我尝试重置那些，但没有奏效。

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

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

基于和生产版本

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

基于（工作）：http://www.nambi.nl/lefunq/ 生产（在移动设备上以 75% 宽度渲染）：http://www.lefunq.com/_index.php

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

4

2 回答 2

4

您的问题是由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，页面就会按应有的方式拉伸。我只需要找出导致奇怪缩放的原因，因为如果没有面部，它就是 0x0 div/iframe等。

解决方案：

我已经尝试了几件事。Onload或Onready事件，以及隐藏或删除 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>');
  }

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

在 jQuery 中检测移动设备的最佳方法是什么？

于 2013-03-29T17:07:51.367 回答
2

我在 Android 2.3.7 上尝试了原生浏览器、Firefox 和 Dolphin。

两个页面都以 100% 缩放呈现，并且在页面完全加载后缩放不会改变。

我相信这个问题是特定于您设备的软件的。

于 2013-03-29T12:57:39.600 回答