我即将开发一款支持触控功能的主要移动WebKit应用程序。
我正在寻找任何提示或有关与基于桌面的标准浏览器不同的建议。
例如：
click上的事件不会通过元素向上传播到body元素，除了某些情况（链接，输入，附加事件的元素等）。
Android WebKit不会为多点触控发出事件。
我知道这些。 还有其他一些问题吗？你知道一些已知问题的列表吗？
答案 0 :(得分：10)
我最近在iPad上的努力中找到了一些东西。
<强> 1 版本4.2 iOS有一个错误，运行太多document.getElementById（'foo'）;会导致浏览器滞后，从而无法正确执行命令。要解决此问题，您需要创建变量来保存此信息，并仅在需要时生成选择命令。 iOS版本4.3确实解决了这个问题，因为我已经在我的iPad上测试了它。
2：使用定位时，我发现在创建自己的视频控制器（对于html5）时，如果尝试使用position：relative或position：absolute来调整视频容器的大小，你不再会看到一个视频，而是一个漂亮的黑屏（有声！）。为了解决这个问题，只需定位父框架，你就可以了。
3：如果你正在使用iScroll，请确保加载超时;特别是如果你在页面上有一些其他javascripts，即使文档在“加载页面”时通过以下方式加载：
// Load iScroll when DOM content is ready.
document.addEventListener('DOMContentLoaded', loaded, false);
我已经失败了，并且无法理解为什么我的div为什么我的div没有正确地显示我所有的元素，但最后两个而不是滚动。相反，我只是做了一个
$(function(){
//other page loaded items to do
//the iScroller init
setTimeout('iScrollerInit();',200);
});
它很快解决了这个问题。
4：如果您发现点击工作不正常，我发现许多移动SDK都存在于所有内容上的绑定项，从而难以实现对事物的点击通常你想要的。所以要解决这个问题，你可以做类似的事情：
$("#yourId").unbind("click").click(function(){
//what to do when clicked
});
我发现这项工作最为出色。
**UPDATE - Nov 2012 **: It's been a few years, and there is so much more to add to this so wanted to update the list a bit.
5： Javascript在少数设备上很昂贵STILL（2012年12月）。做一些操纵DOM的东西会对设备造成很大的延迟，在做这些事情时你应该非常小心。您需要确保在Android旧设备和iPhone旧设备中测试移动网页，因为我们的指标仍然是使用良好的设备。
6：如果您要在设备（iPhone应用程序或Android应用程序）上的Web视图中传递HTML，有时您会看到几乎高度为0.您需要什么让你的iPhone或Android应用程序在实际页面上进行Javascript调用，以div为目标，检查页面offsetHeight，然后可以准确设置webview高度。
**UPDATE - Dec 2012 **: Few more awesome findings
7：我发现当您针对点击事件定位您的div时，移动浏览器会在触发事件前等待300毫秒，从而有效地创建延迟。他们这样做是为了确认点击不是双击。为了避免这种情况，你可以绑定touchend事件，而不是立即触发！
这是一些代码
$(document).ready(function() {
$('#element').bind('touchstart', function(event) {
event.stopPropagation();
event.preventDefault();
$(this).toggleClass('hover_heading');
});
$('#element').bind('touchend', function(event) {
event.preventDefault();
$(this).toggleClass('hover_heading');
});
});
然后，当您看到项目发生眨眼时，请使用此功能将其删除。
body * {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
另外，如果你想查看谷歌写的一篇优秀文章你可以在这里查看： - Creating Fast Buttons for Mobile Web Applications
**UPDATE - Feb 2013 **: Few more awesome findings
8 ：在对CSS文件进行版本控制并使用以下网址缓存它们时，例如：mydomain.com/css/styles.css?v=123（或其他内容），请注意android 2.2设备早些时候，这会导致非常奇怪的行为。
根据我的发现，android将完全错误地渲染，并强制html甚至搞砸了。使用这些旧设备时最好的方法是遗憾地改变实际的文件名。
希望这些发现对其他人有所帮助，因为我已经在这些问题中挣扎了好几个小时让我头脑发热：）
答案 1 :(得分：6)
我不知道编译列表，但我可以列出一些：
只是一些快速观察。
答案 2 :(得分：1)
我最近写了一篇关于使用html5框架的一些博客的博客文章 - 在我的案例中，Sencha Touch构建了一个包含在PhoneGap中的本机应用程序。
http://www.moneytoolkit.com/2011/05/the-problem-with-sencha-touch-and-phonegap/
答案 3 :(得分：1)
Android中的3D webkit已被破坏，特别是涉及与输入字段相关的任何内容时。
http://code.google.com/p/android/issues/detail?id=13048
在某些情况下，我一直在尝试追踪随机的CSS行为，最终归结为更高元素中的-webkit-transform:translate3d(0,0,0);（以便在iOS设备中启用硬件加速），将所有内容都抛弃。
答案 4 :(得分：0)
position: fixed不起作用。
答案 5 :(得分：0)
嗯，在Android中有一个令人讨厌的错误，用Javascript设置插入符号或选择对输入发生的位置没有实际影响。
我问了一个关于它的问题，结论是它是一个浏览器错误:(，它发生在2.2和2.3中。
答案 6 :(得分：0)
我遇到过两个“特征”：
输入框不响应触摸事件（ontouchstart，ontouchmove，ontouchcancel），这也意味着ontouchmove =“event.preventDefault（）”不会阻止页面滚动，如果你正在创建一个固定页面，非 - 可滚动的应用程序。 （可以使用隐藏的div创建一个笨重的解决方法。）
无法在Android或iOS上的WebKit中的任何表单字段上使用autofocus或element.focus（）。元素将接收光标，但键盘不会出现。我仍然试图为此构建一个解决方法，但目前它是一个已知的，故意的限制。 ：（
答案 7 :(得分：0)
iOS点击事件上的Blockquote不会向上传播到元素上的元素，除了某些情况（链接，输入，附加事件的元素等）
这对我很有帮助 - 谢谢。
我们的Web应用程序的用户测试中出现的一个UX项目是选择元素的iOS交互是糟糕的。它需要3次点击：1）单击选择器元素，2）单击要选择的项目，3）单击完成。当您单击“完成”时，没有任何事件可以解决。因此，对于短列表，最好是创建自己的弹出菜单或其他交互。
答案 8 :(得分：0)
溢出：Android 2.3上不支持滚动
你必须手动让你的div滚动（touchmove + scrollTop更改），如果它们在容器中
有一个令人讨厌的错误，如果他们或他们的容器在任何时候被隐藏，Android 2.3上的选择框将无法激活