首页 文章

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

提问于
浏览 次
56

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

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

e.g. in Safari on the iPad

  • iPad Safari完全控制选择列表/选项样式

  • iPad在输入元素获得焦点时打开屏幕键盘，因此内联浮动日历窗口小部件（等）可能无法按预期工作（或需要更改）

  • iPad Safari不支持 position:fixed ，如桌面Safari <iOS 5

  • iPad Safari（类似于iPhone / iPodTouch Safari）自动超链接10位数字以提供电话号码/联系方式

  • iPad Safari prompt('long message...','default'); 仅显示消息的1行（尽管它确实提供了消息的滚动

我从其他人那里听说某些JavaScript不起作用等等，但我还没有完全测试它，所以我很感激你可能遇到的任何发现 .

ipad safari rendering variations

17 回答

  • 1

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

    回复于
  • 2

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

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

    回复于
  • 3

    还有一些对你来说：

    • 没有闪光灯

    • Lousy iFrame支持（因此facebook等需要iPad的自定义实现）

    • 奇怪的缓存限制

    • HTML textAreas没有滚动条（你需要双指滑动 - 这当然非常直观）

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

    回复于
  • 2

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

    刚被这个职位 grab 了：修复了我的自我

    回复于
  • 4

    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>

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

    回复于
  • 12

    jQuery 's offset() doesn'工作：http://bugs.jquery.com/ticket/6446

    回复于
  • 4

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

    回复于
  • 1

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

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

    回复于
  • 3

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

    回复于
  • 1

    旁边不支持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>
    回复于
  • 4

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

    在左右层，边框消失 .

    回复于
  • 3

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

    回复于
  • 0

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

    body {-webkit-transform:translate3d(0,0,0);}
    回复于
  • 1

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

    回复于
  • 1

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

    回复于
  • 0

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

    回复于
  • 2
    position: fixed;

    在iOS 4中不起作用，但在iOS 5上可以使用 .

    回复于

相关问题