Question

最近在Windows / Mac桌面浏览器上测试了一个Web应用程序 - 然后在iPad上我注意到Safari中的各种差异，这是我没想到的。即使版本＃是相同的。

我想编写一份这些差异的清单（供我自己和他人使用）作为开发人员参考。

e.g。在iPad上的Safari中

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

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

Answer 1

还有一些给你：

没有Flash
Lousy iFrame支持（因此facebook等需要iPad的自定义实现）
奇怪的缓存限制
HTML textAreas没有滚动条（你必须用双指滑动 - 这当然非常直观）

总的来说。把它看作是一个放大的iPhone，而不是按比例缩小的桌面。

Answer 2

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

刚刚被这个职位抓住了：修复了我自己的问题

Answer 3

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>

（蓝色边框表示按钮的位置，对黑客来说并不重要）

Answer 4

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

Answer 5

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

Answer 6

看起来iPad Safari对overflow:auto;的元素有问题，因此应该显示滚动条（test page with div's and iframe's）。

Answer 7

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

谷歌（目前）还没有太多相关内容。

Answer 8

除了不支持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>

Answer 9

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

到左右图层，边框消失。

Answer 10

现在，您可以通过使用-webkit-appearance: none;

重置选择列表来控制iOS上的选择列表的样式

Answer 11

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

Answer 12

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

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

Answer 13

上面的24位透明PNGS某些文件大小不会在iPad2上呈现然而，我可以获得相同尺寸的8位渲染我还没有找到这个最大文件大小是为了让它们呈现。

Answer 14

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

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

Answer 15

框架问题。 iPad Safari将隐藏滚动条并将帧扩展到其内容的大小。更改框架代码以包含scrolling="yes"和noresize="noresize"似乎无效。有些网站看起来很好，甚至是Dreamcast浏览器，但不是iPad。可以使用表格和iframe而不是常规框架设置（cols和row等）修复此问题。

Answer 16

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

Answer 17

position: fixed;

在iOS 4中不起作用，但在iOS 5上有效。

“Desktop Safari”上已知的“Safari on iPad”差异列表

17 个答案: