Jquery移动加载在Firefox中是正确的，但Chrome或Safari不正确

Question

我用html和jquery创建了一个移动站点，但它在Chrome (或iphone上)中没有正确加载。网站没有后端-所有对内容的更改都将通过编辑html进行。在我的html中，我没有具体地引用ajax。而且，每一页都通过"#pageid“链接。问题是，当我浏览网站时，各种页面都无法正确显示，除非我点击”刷新“。网址是mobile.shorelinelake.com。我对此非常陌生，所以请耐心对待新手:)谢谢您的帮助！

http://mobile.shorelinelake.com (如果单击"Lake“，然后单击"Sailing”或"Cafe“转到”菜单“，您可以看到问题--页面在加载后跳转，切断页眉，将内容放在页脚下面，或者将完全隐藏jquery元素.)

Answer 1

我现在注意到的一件事是，您使用的是Jquery和Jquery的旧版本。自从您正在使用的alpha之后，已经有了很多改进。另外，您正在链接到一些不存在的文件。由于某种原因，找不到Phonegap.js和ajax-loader.gif。在我的控制台中，我看到了196条警告，我相信这些警告都与你使用旧版本有关。

此外，您还有31个html错误。这里就是一个例子

第88行：

<a href="tel:16509657474" div data-role="button" data-theme="c" class="ui-btn-text">

你有很多搁浅的</p>标签。其中大部分都在菜单页面中。修复这些错误对于解决您的问题是必要的。尝试通过html5验证器运行您的文档以查找这些错误。

我也建议把它分解成更小的部分。以下是我的推理：

1. 更易于维护和编辑，
2. 则使dom的大小保持合理。Jquery将从dom中删除旧页面，保持其manageable.
3. Faster页面加载，从而获得更好的用户体验。您的用户可能不会访问每个页面。只装载他们需要看到的东西。
4. 带宽可能会使用户在移动设备上花费额外的钱。