59

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

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

例如在 iPad 上的 Safari 中

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

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

4

17 回答 17

13

再给你几个：

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

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

于 2010-07-10T01:42:04.167 回答
4

我认为这可能有用：Apple 为 iPad 准备网络内容的指南

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

于 2010-06-16T15:27:31.563 回答
4

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

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

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

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

于 2010-08-30T21:05:40.673 回答
4

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

于 2011-03-17T19:39:16.107 回答
3

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

于 2011-06-06T11:22:33.390 回答
3

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

Google（还）没有太多关于此的内容。

于 2010-11-19T13:45:08.063 回答
3

看起来 iPad Safari 的元素也有问题overflow:auto;，因此应该显示滚动条（带有 div 和 iframe 的测试页面）。

于 2010-06-11T14:31:32.203 回答
2
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%;

到左右图层，边框消失。

于 2012-01-12T10:59:39.807 回答
2

除了 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>
于 2011-12-21T06:00:19.253 回答
2

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

于 2015-05-29T19:06:48.310 回答
1

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

于 2011-08-25T14:44:24.523 回答
1

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

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

于 2011-11-28T23:02:41.523 回答
1

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

body {-webkit-transform:translate3d(0,0,0);}
于 2010-10-14T14:34:54.060 回答
1

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

于 2010-12-26T02:59:52.277 回答
1

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

于 2011-12-27T20:45:05.060 回答
0 
position: fixed;

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

于 2012-01-04T10:08:45.300 回答
0

我还发现contenteditable移动 safari 不支持此功能，因此使用纯文本textarea是更好的选择。苹果开发者文档

于 2011-06-22T13:20:19.620 回答