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

最近在Windows / Mac桌面浏览器上testing一个Web应用程序 – 然后在iPad上，我注意到了Safari的各种不同，我并不期待。即使版本号是相同的。

我想编写一份这些差异的列表（对于我自己和其他人）来作为开发者参考。

例如在iPad上的Safari

iPad Safari可以完全控制select列表/选项样式
当input元素收到焦点时，iPad会打开屏幕键盘，因此内嵌浮动日历小部件（等等）可能无法按预期工作（或需要更改）
iPad Safari不支持position:fixed像桌面Safari <iOS 5一样position:fixed
iPad Safari（类似于iPhone / iPodTouch Safari）自动超链接10位数字以提供电话号码/联系人选项
iPad的Safari prompt('long message...','default'); 只显示1条消息（虽然它提供了滚动的消息

我听说别人说某些JavaScript不起作用，等等，但我还没有完全testing，所以我会很感激您可能遇到的任何发现。

还有几个给你：

没有闪光灯
糟糕的iFrame支持（所以像facebook等需要为iPad定制实施）
奇怪的caching限制
HTML textAreas没有滚动条（你必须双指滑动 – 这当然是非常直观的）

一般来说。把它当作放大的iPhone，而不是缩小的桌面。

我认为这可能是有用的：苹果准备为iPad的网页内容

刚被抓出来的位置：固定发出我的自我

iPad上的Safari与iPhone上的button宽度/填充同样存在问题

iPhone <button>填充不可更改？描述了这个问题以及用文本去除button上的填充的解决scheme，但是如果你想要一个button比填充本身更窄（例如，只有一个小图标的button），这并不能帮助你。为了做到这一点，我不得不用周围的button与定义的宽度和溢出的外部元素：像这样隐藏：

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

（蓝色的边框是显示button的位置，这对黑客来说并不重要）

jQuery的偏移量（）不起作用： http : //bugs.jquery.com/ticket/6446

它也看起来像iPad的Safari浏览器与overflow:auto;元素的问题overflow:auto; 因此应该显示滚动条（ div和iframe的testing页）。

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

Google（还）没有太多关于这方面的内容。

iPad的浏览器不支持file upload（即使它支持它将无用，因为iPad没有标准的文件浏览器）。文件字段显示为select文件button变灰。

旁边不支持TextAea中的滚动条，似乎我们可以使用javascript来自动selectTextArea中的文本。此代码只会将光标移动到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>

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%;

到左侧和右侧图层，边框消失。

现在，您可以通过使用-webkit-appearance: none;重置它来控制iOS上的select列表的样式-webkit-appearance: none;

此规则修复了iOS设备上Safari上的animation闪烁：

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

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

24位透明PNGS高于一定的文件大小不在iPad2上呈现。
然而，我可以得到8位相同的尺寸来渲染。
我还没有find这个最大的文件大小是为了让他们呈现。

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

其中之一是window.postMessage，这是一种与其他页面上的脚本进行交互的方式，例如，在iframe内“使用”的脚本。自动播放video也不起作用。

框架问题。 iPad的Safari将隐藏滚动条和扩大框架的大小的内容。更改框架标签，包括scrolling="yes"和noresize="noresize"似乎什么都不做。有些网站甚至是Dreamcast浏览器，但在iPad上都没有。这个问题可以通过使用表格和iframe而不是正常的框架设置（cols和rows等）来解决。

我还发现，移动Safari不支持contenteditable ，因此使用纯textarea是一个更好的select。苹果开发人员文档

 position: fixed;

不适用于iOS 4，但适用于iOS 5。

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

PostgreSQL中的CHARACTER VARYING和VARCHAR有什么区别？