gpt4 book ai didi

android - iOS 或 Android 上的 WebKit 开发中的陷阱/错误

转载 作者:IT王子 更新时间:2023-10-28 23:31:26 27 4
gpt4 key购买 nike

我即将开发一个主要的支持触控的移动 WebKit 应用程序。

我正在寻找与基于桌面的标准浏览器不同的任何提示或建议。

例如:

  • 在 iOS 上,click 事件不会向上传播到元素之上的 body 元素,但某些情况除外(链接、输入、带有附加事件的元素等) .)。

  • Android WebKit 不会为多点触控发出事件。

我知道这些。 还有其他问题吗?你知道一些已知问题的列表吗?

最佳答案

我最近在 iPad 上的尝试中发现了一些东西。

1:iOS 4.2 版存在运行过多 document.getElementById('foo'); 的错误。将导致浏览器滞后,从而无法正确执行命令。为了解决这个问题,您需要创建变量来保存此信息,并且仅在需要时才发出选择命令。不过,iOS 的 4.3 版确实解决了这个问题,因为我已经在我的 iPad 上进行了测试。

2: 在使用定位时,我发现在创建自己的视频 Controller (用于 html5)时,如果您尝试使用 position:relative 或 position:absolute 调整视频容器的大小,您将不再看到视频,而是一个漂亮的黑屏(有声音!)。为了解决这个问题,只需定位父框架就可以了。

3:如果您使用的是 iScroll一定要让它加载超时;特别是如果您在页面上有一些其他 javascripts,即使文档在“页面已加载”时通过以下方式加载它:

// Load iScroll when DOM content is ready.
document.addEventListener('DOMContentLoaded', loaded, false);

我已经失败了,我一生都无法弄清楚为什么我的 div 没有正确调整大小,只显示了最后两个元素之外的所有元素并且没有滚动。相反,我只是做了一个

$(function(){
//other page loaded items to do
//the iScroller init
setTimeout('iScrollerInit();',200);
});

它很快解决了这个问题。

4:如果您发现您的点击不太正常,我发现很多移动 SDK 的所有内容都有绑定(bind)项,因此很难实现对内容的点击通常你想要。因此,要解决此问题,您可以执行以下操作:

$("#yourId").unbind("click").click(function(){ 
//what to do when clicked
});

我发现它的效果最好。

**更新 - 2012 年 11 月 **:已经有几年了,还有很多要添加的内容,所以想稍微更新一下列表。

5: Javascript 在少数设备上仍然很昂贵(2012 年 12 月)。操作 DOM 的操作会在设备上产生大量延迟,在执行这些操作时您应该非常小心。您需要确保在 Android 旧设备和 iPhone 旧设备上测试您的移动网页,因为根据我们的指标,这些设备仍然是使用良好的设备。

6:如果您传递 HTML 以加载到设备(iPhone 应用程序或 Android 应用程序)上的 WebView 中,有时您会看到高度几乎为 0。您需要做什么要做的是让您的 iPhone 或 Android 应用程序在针对 div 的实际页面上进行 Javascript 调用,以检查页面 offsetHeight,然后可以准确设置 webview 高度。

**更新 - 2012 年 12 月 **:更棒的发现

7:我发现,当您将 div 定位为点击事件时,移动浏览器会在触发事件之前等待 300 毫秒,从而有效地造成延迟。他们这样做是为了确认点击不是双击。为了避免这种情况,您可以绑定(bind) 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);
}

此外,如果您想查看 google 撰写的一篇出色的文章,您可以在此处查看: - Creating Fast Buttons for Mobile Web Applications

**更新 - 2013 年 2 月 **:更棒的发现

8:在对 CSS 文件进行版本控制并使用以下 URL 缓存它们时:mydomain.com/css/styles.css?v=123(或其他),在 android 2.2 设备上要小心更早,因为这会导致极其奇怪的行为。

根据我的发现,android 将呈现完全错误的情况,并强制 html 甚至被弄乱。遗憾的是,使用这些旧设备的最佳方法是更改​​实际文件名。

希望这些发现可以帮助其他人,因为我已经在这些问题中苦苦挣扎了几个小时,摸不着头脑:)

关于android - iOS 或 Android 上的 WebKit 开发中的陷阱/错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4669823/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com