已知“iPad上的Safari”与“桌面Safari”的区别列表

再给你一些:

1. 无闪光灯
2. 糟糕的iframe支持(比如facebook等需要为ipad定制实现)
3. 奇怪的缓存限制
4. HTML文本区域没有滚动条(您必须用双手指滑动-当然,这是非常直观的)

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

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

刚被这个职位抓住:我自己解决了问题

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>

(蓝色边框显示按钮的位置,对黑客来说并不重要)

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

看起来ipad safari也对 overflow:auto; 因此应该显示滚动条( test page with div's and iframe's )

iPad Safari在处理背景图片时似乎遇到了一些困难,这些图片显示了一些奇怪的低洼内容。

谷歌对此还没有太多了解。

ipad浏览器不支持文件上传(即使它支持文件上传,也没用,因为ipad没有标准的文件浏览器)。此时将显示“文件”字段,其中“选择文件”按钮灰显。

另外,在textaea中不支持滚动条,似乎我们也可以使用javascript自动选择文本区域中的文本。 此代码将只将光标移动到文本区域中的文本结尾。

<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中似乎有一个bug,在这个bug中,一个既有背景图像又有背景颜色的css元素被渲染为背景颜色的轻微边框。它应该一直填充到渲染元素的边缘的背景图像。

当我试图在iPad上查看时,我的网站上也有同样的bug。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%;

在左层和右层,边框消失。

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

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

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

ipad safari中似乎有一个bug,在这个bug中,一个既有背景图像又有背景颜色的css元素被渲染为背景颜色的轻微边框。它应该一直填充到渲染元素的边缘的背景图像。

超过某个文件大小的24位透明PNG不会在IPAD2上呈现。
但是,我可以得到8位相同尺寸的渲染。
我还不知道最大文件大小是什么,以便让他们渲染。

我目前正在开发一个小型的响应式Web应用程序,它大量使用iframe youtube API。显然,iPad版本的Safari不支持我在这个项目中大量使用的几种HTML5方法。

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

框架问题。iPadSafari将隐藏滚动条并将框架扩展到其内容的大小。 将帧标记更改为包含 scrolling="yes" 和 noresize="noresize" 似乎什么都没做。 有些网站在任何东西上看起来都很好,即使是一个梦幻浏览器,但在iPad上却不是。可以使用表和iframes而不是普通的框架设置(cols和rows等)来解决此问题。

我还发现 contenteditable 在Mobile Safari中不支持,因此使用纯 textarea 是更好的选择。 Apple Developer Docs

position: fixed; 

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