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

问题描述：

最近在Windows/Mac桌面浏览器上测试Web应用程序 - 然后在iPad上，我注意到Safari中的各种差异，我并不期待。即使版本号是相同的。“桌面Safari”上的已知“iPad上的Safari”列表

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

例如在Safari在iPad

ipad公司的Safari需要选择列表/选项造型的完全控制
iPad的打开时的输入元件接收焦点，从而内嵌浮动日历窗口小部件的屏幕上键盘（等等）可以不如预期（或需要改变）
iPad的Safari浏览器不支持position:fixed像桌面的Safari <的iOS 5
iPad的Safari浏览器（类似iPhone/iPod Touch的Safari浏览器）自动超链接的10个号码提供电话＃/接触选项
iPad的Safari浏览器prompt('long message...','default');只显示1行的消息（虽然它确实提供

我从别人听到某些JavaScript的不工作，等等，等等消息的滚动，但我还没有完全测试它，因此我会很感激您可能遇到的任何发现。

好雅将其复位控制选择列表中的iOS上的造型，但是这可能是作为一个博客张贴的地方，从这个问题挂好。如果您对特定的差异有疑问，Stack Overflow应该能够提供帮助。 –

我让这个社区Wiki希望它可以是一个单一的资源......我发现，分散的，埋藏的评论和博客信息是什么让*在提供“正确”和简洁的信息方面更胜一筹。尽管在任何答案中都可以链接到相关的博客文章。我刚刚被“position：fixed”差异所困扰，因此我相信其他开发人员会发现**“已知差异”**的列表非常方便。 – scunliffe

答

它也看起来像iPad的Safari浏览器与overflow:auto;元素，因此应显示滚动条（test page with div's and iframe's）的问题。

答

我想这可能是有用的：Apple's guide to preparing web content for the iPad

的位置就被抓了出来：固定的问题，我的自我

答

一种你几个：

没有闪光灯
糟糕iFrame支持（所以facebook等需要iPad的定制实施）
奇怪的缓存限制
HTML文本域没有得到一个滚动条（你有双指轻扫 - 这当然是令人惊讶的直观）

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

有关iframe问题的更多详细信息？ – scunliffe

移动Safari浏览器上的iframe不尊重溢出指令。这里有一些例子：http://www.webmanwalking.org/library/experiments/dsp_frames_outer_document.html –

移动Safari确实尊重溢出，但它没有滚动UI。您可以使用已经提到的textareas的_amazingly直观的双指滑动_滑动它们。 – mercator

答

Safari浏览器在iPad上有按钮的宽度相同的问题/填充作为在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>

（蓝色边框是显示其中按钮是，它不是黑客关键）

答

这条规则修复iOS设备上的Safari动画闪烁：

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

是的，但请谨慎使用带有大型DOM或许多高分辨率图像的页面。在这些情况下，它可能会导致Safari崩溃，原因尚未确定。 –

这固定了闪烁，但打破了很多其他的东西。 – mrbinky3000

答

iPad的Safari浏览器似乎有麻烦处理背景图片在罕见的情况下，表现出较低的躺在内容的怪异线。

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

我也注意到了这一点......我会在有时使用透明度的情况下在PNG图像周围获得发色线条......这在缩放时更明显。 – scunliffe

答

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

我也注意到了这一点 - 感谢您的确认。 – scunliffe

有什么解决办法吗？ – kaustubh

答

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

答

iPad的浏览器支持犯规文件上传（即使它支持它会没用，因为iPad不具备标准的文件浏览器）。文件字段显示为选择文件按钮变灰。

确实如此。它太糟糕了，它不能提供从设备上拉取图像/歌曲/电影或在iPad2外壳中拍照的选项。上传头像/个人资料图片是非常常见的操作。 – scunliffe

答

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

适用于iOS5 – Thariama

答

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

有趣的发现...如果你有任何示例链接图像，我会好奇地尝试一下。（也仅限于iPad2？还是iPad1也受到影响？） – scunliffe

答

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

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

我不确定Safari是否支持这个功能，但是有没有机会遇到这个更普遍的问题？ http://*.com/questions/3457391/how-do-you-use-window-postmessage-across-domains – scunliffe

答

除了在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>

答

框架问题。 iPad Safari将隐藏滚动条并将帧展开为其内容的大小。更改帧标记以包括scrolling="yes"和noresize="noresize"似乎什么也不做。一些网站在所有内容上都很好看，即使是Dreamcast浏览器，但在iPad上也不例外。这个问题可以通过表格和iframe来修正，而不是正常的框架设置（cols和rows等）。

答

position: fixed;

不中iOS 4的工作，但确实在iOS 5的工作

我不认为iOS版本绑定到iPad模型。 – alex

我现在改变了我的答案：P – OZZIE

答

似乎有哪里与两个背景图像和背景颜色的CSS元素呈现在iPad的Safari浏览器中的错误背景颜色的颜色略有边框。它应该填充背景图像一直到渲染元素的边缘。

我刚刚在我的网站上有同样的错误，当试图在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;

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

相关推荐