已知的“iPad 上的 Safari”与“桌面 Safari”的差异列表答案

【问题标题】：List of known "Safari on iPad" differences over "Desktop Safari"已知的“iPad 上的 Safari”与“桌面 Safari”的差异列表
【发布时间】：2011-03-01 16:51:48
【问题描述】：

最近在 Windows/Mac 桌面浏览器上测试 Web 应用程序时，然后在 iPad 上，我注意到 Safari 中的各种不同之处，这是我没有预料到的。即使版本号相同。

我想列出这些差异（供我自己和其他人）作为开发人员参考。

例如在 iPad 上的 Safari 中

iPad Safari 完全控制选择列表/选项样式
当输入元素获得焦点时，iPad 会打开屏幕键盘，因此内联浮动日历小部件（等）可能无法按预期工作（或需要更改）
iPad Safari 不支持position:fixed 像桌面 Safari
iPad Safari（类似于 iPhone/iPodTouch Safari）自动超链接 10 位数字以提供电话号码/联系人选项
iPad Safari prompt('long message...','default'); 仅显示 1 行消息（尽管它确实提供消息滚动功能

我从其他人那里听说某些 JavaScript 不起作用，等等等等，但我尚未对其进行全面测试，因此我会感谢您可能遇到的任何发现。

【问题讨论】：

对你好，但这可能作为某处的博客文章更好，链接到这个问题。如果您对具体差异有疑问，Stack Overflow 应该可以提供帮助。
我创建了这个社区 Wiki，希望它可以是一个单一的资源......我发现博客上分散、隐藏的 cmets 和错误信息是 StackOverflow 在提供“正确”和简洁信息。不过，请随意链接到任何答案中的相关博客文章。我刚刚被position:fixed 的差异所困扰，因此我相信其他开发人员会发现“已知差异”列表非常方便。

标签： ipad safari rendering variations

【解决方案1】：

您现在可以通过 -webkit-appearance: none; 重置来控制 iOS 上选择列表的样式

【讨论】：

【解决方案2】：

position: fixed;

在 iOS 4 中无法使用，但在 iOS 5 中可以使用。

【讨论】：

我认为 iOS 版本与 iPad 型号无关。
我现在改了答案：P

【解决方案3】：

iPad Safari 中似乎存在一个错误，其中带有背景图像和背景颜色的 CSS 元素在背景颜色的颜色中带有轻微的边框。它应该用背景图像一直填充到渲染元素的边缘。

当我尝试在 Ipad 上查看时，我的网站上出现了同样的错误。 HTML 结构如下：

<div class="main"> <!-- background-color: white -->
   <div class="left"></div> <!-- background-image: url(some_transparent_png) -->
   <div class="content">...</div>
   <div class="right"></div> <!-- background-image: url(some_transparent_png) -->
</div>

左层使用背景图像，而主层仅使用背景颜色。 Ipad 视图在左右图层的边缘显示了轻微的边框。

当我添加时

 -webkit-background-size: 100% 100%;

到左右图层，边框消失。

【讨论】：

【解决方案4】：

框架问题。 iPad Safari 将隐藏滚动条并将框架扩展至其内容的大小。将框架标签更改为包含scrolling="yes" 和noresize="noresize" 似乎没有任何作用。有些网站在任何东西上看起来都很好，甚至是 Dreamcast 浏览器，但在 iPad 上却不行。可以使用表格和 iframe 而非正常的框架设置（列和行等）来解决此问题。

【讨论】：

【解决方案5】：

Beside 不支持 TextAea 中的滚动条，看来我们也可以使用 javascript 来自动选择 TextArea 中的文本。此代码只会将光标移动到 TextArea 中文本的末尾。

<div>
  <textarea id="text-embed-code" autocapitalize="off" multiline="">
There is a fox running after chrome.
  </textarea>
  <button onclick="testSelectText(event);">select text</button>
</div>
<script>
  function testSelectText(e) {    
    var box = document.getElementById("text-embed-code");
    box.select();
    e.preventDefault();
    return false;
  }
</script>

【讨论】：

【解决方案6】：

我目前正在开发一个小型响应式网络应用程序，它大量使用 iframe youtube api。显然 ipad 版本的 safari 不支持我在这个项目中大量使用的一些 html5 方法。

其中一个是window.postMessage，它是一种与其他页面上的脚本交互的方式，例如在该iframe“内”使用的脚本。自动播放视频也不起作用。

【讨论】：

我不确定 Safari 是否支持此功能，但您是否有机会遇到这个更普遍的问题？ stackoverflow.com/questions/3457391/…

【解决方案7】：

超过特定文件大小的 24 位透明 PNG 不会在 iPad2 上呈现。
但是，我可以获得相同尺寸的 8 位进行渲染。
我还没有发现这个最大文件大小是为了让它们渲染。

【讨论】：

有趣的发现...如果您有任何指向图像的示例链接，我很想尝试一下。（也仅限于 iPad2？还是 iPad1 也受到影响？）

【解决方案8】：

我还发现移动 safari 不支持 contenteditable，因此使用普通的 textarea 是更好的选择。 Apple Developer Docs

【讨论】：

【解决方案9】：

iPad 浏览器不支持文件上传（即使支持也无用，因为 iPad 没有标准的文件浏览器）。文件字段出现时，选择文件按钮呈灰色显示。

【讨论】：

非常正确。太糟糕了，它没有提供从设备中提取图像/歌曲/电影或在 iPad2 外壳中拍照的选项。上传头像/头像是很常见的操作。

【解决方案10】：

jQuery 的 offset() 不起作用：http://bugs.jquery.com/ticket/6446

【讨论】：

【解决方案11】：

iPad Safari 中似乎存在一个错误，其中包含背景图像和背景颜色的 CSS 元素在呈现背景颜色颜色时带有轻微的边框。它应该用背景图像一直填充到渲染元素的边缘。

【讨论】：

【解决方案12】：

iPad Safari 在极少数情况下似乎无法处理背景图像，显示奇怪的低层内容线条。

Google 中没有太多关于此的内容（目前）。

【讨论】：

我也注意到了这一点……有时我会在透明的 PNG 图像周围出现细线……这在缩放时更加明显。

【解决方案13】：

此规则修复了 iOS 设备上 Safari 中的动画闪烁问题：

body {-webkit-transform:translate3d(0,0,0);}

【讨论】：

是的，但在具有大型 DOM 或具有许多高分辨率图像的页面上请谨慎使用。在这些情况下，它可能会导致 Safari 崩溃，原因尚待确定。
这修复了闪烁但破坏了很多其他东西。

【解决方案14】：

iPad 上的 Safari 与 iPhone 上的按钮宽度/填充有相同的问题

iPhone <button> padding unchangeable? 描述了这个问题以及删除带有文本的按钮上的填充的解决方案，但是如果您希望按钮比填充本身更窄（例如，对于只有一个小图标的按钮），这对您没有帮助在上面）。为此，我必须用定义宽度和溢出的外部元素围绕按钮：隐藏如下：

<span style="border: solid 1px blue; display: block; width: 16px; overflow: hidden">
    <button style="-webkit-appearance: none; border-width: 0">&nbsp;</button>
</span>

（蓝色边框是为了显示按钮所在的位置，它对 hack 并不重要）

【讨论】：

【解决方案15】：

给你更多：

无闪光灯
糟糕的 iFrame 支持（因此 facebook 等需要为 iPad 定制实现）
奇怪的缓存限制
HTML textAreas 没有滚动条（您必须用双指滑动 - 这当然非常直观）

一般。将其视为放大的 iPhone，而不是缩小的桌面。

【讨论】：

有关 iframe 问题的更多详细信息？
移动 Safari 上的 iframe 不遵守溢出指令。这里有一些例子：webmanwalking.org/library/experiments/…
Mobile Safari 确实尊重溢出，但它没有滚动 UI。您可以使用您已经提到的用于 textareas 的非常直观的双指滑动来滚动它们。
不应该 #2 'iFrames 很糟糕' ;)

【解决方案16】：

我认为这可能有用：Apple's guide to preparing web content for the iPad

刚刚被职位发现：解决了我自己的问题

【讨论】：

【解决方案17】：

iPad Safari 的 overflow:auto; 元素似乎也存在问题，因此应该显示滚动条 (test page with div's and iframe's)。

【讨论】：