「桌面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的不工作，等等，等等消息的滾動，但我還沒有完全測試它，因此我會很感激您可能遇到的任何發現。

2010-06-09 scunliffe

好雅將其復位控制選擇列表中的iOS上的造型，但是這可能是作爲一個博客張貼的地方，從這個問題掛好。如果您對特定的差異有疑問，Stack Overflow應該能夠提供幫助。 –

我讓這個社區Wiki希望它可以是一個單一的資源......我發現，分散的，埋藏的評論和博客信息是什麼讓StackOverflow在提供「正確」和簡潔的信息方面更勝一籌。儘管在任何答案中都可以鏈接到相關的博客文章。我剛剛被「position：fixed」差異所困擾，因此我相信其他開發人員會發現**「已知差異」**的列表非常方便。 – scunliffe

它也看起來像iPad的Safari瀏覽器與overflow:auto;元素，因此應顯示滾動條（test page with div's and iframe's）的問題。

來源

2010-06-11 14:31:32 scunliffe

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

的位置就被抓了出來：固定的問題，我的自我

來源

2010-06-16 15:27:31 Ranguard

一種你幾個：

沒有閃光燈
糟糕iFrame支持（所以facebook等需要iPad的定製實施）
奇怪的緩存限制
HTML文本域沒有得到一個滾動條（你有雙指輕掃 - 這當然是令人驚訝的直觀）

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

來源

2010-07-10 01:42:04

有關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>

（藍色邊框是顯示其中按鈕是，它不是黑客關鍵）

來源

2010-08-30 21:05:40 divestoclimb

這條規則修復iOS設備上的Safari動畫閃爍：

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

來源

2010-10-14 14:34:54

是的，但請謹慎使用帶有大型DOM或許多高分辨率圖像的頁面。在這些情況下，它可能會導致Safari崩潰，原因尚未確定。 –

這固定了閃爍，但打破了很多其他的東西。 – mrbinky3000

iPad的Safari瀏覽器似乎有麻煩處理背景圖片在罕見的情況下，表現出較低的躺在內容的怪異線。

在Google（還）中沒有太多關於此的內容。

來源

2010-11-19 13:45:08 Damien

我也注意到了這一點......我會在有時使用透明度的情況下在PNG圖像周圍獲得髮色線條......這在縮放時更明顯。 – scunliffe

在iPad Safari中似乎存在一個錯誤，其中具有背景圖像和背景顏色的CSS元素在背景顏色的顏色中具有輕微邊框。它應該填充背景圖像一直到渲染元素的邊緣。

來源

2010-12-26 02:59:52 jkg0

我也注意到了這一點 - 感謝您的確認。 – scunliffe

有什麼解決辦法嗎？ – kaustubh

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

來源

2011-03-17 19:39:16 alalonde

iPad的瀏覽器支持犯規文件上傳（即使它支持它會沒用，因爲iPad不具備標準的文件瀏覽器）。文件字段顯示爲選擇文件按鈕變灰。

來源

2011-06-06 11:22:33 rubyprince

確實如此。它太糟糕了，它不能提供從設備上拉取圖像/歌曲/電影或在iPad2外殼中拍照的選項。上傳頭像/個人資料圖片是非常常見的操作。 – scunliffe

我還發現移動Safari不支持contenteditable，因此使用普通textarea是更好的選擇。 Apple Developer Docs

來源

2011-06-22 13:20:19 scunliffe

適用於iOS5 – Thariama

24位透明PNGS高於一定的文件大小不顯示在iPad2上。
但是，我可以得到8位相同尺寸的渲染。
我還沒有找到這個最大文件大小是爲了讓他們呈現。

來源

2011-08-25 14:44:24 PlanetPUSH

有趣的發現...如果你有任何示例鏈接圖像，我會好奇地嘗試一下。（也僅限於iPad2？還是iPad1也受到影響？） – scunliffe

我目前正在研究一個小型的響應式網頁應用程序，它會大量使用iframe youtube api。顯然，safari的ipad版本不支持我在這個項目中大量使用的一些html5方法。

其中之一是window.postMessage，它是與其他頁面上的腳本進行交互的一種方式，例如，在iframe內「使用」的腳本。 Autoplaying視頻也不起作用。

來源

2011-11-28 23:02:41 Julian

我不確定Safari是否支持這個功能，但是有沒有機會遇到這個更普遍的問題？ http://stackoverflow.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>

來源

2011-12-21 06:00:19 leon

框架問題。 iPad Safari將隱藏滾動條並將幀展開爲其內容的大小。更改幀標記以包括scrolling="yes"和noresize="noresize"似乎什麼也不做。一些網站在所有內容上都很好看，即使是Dreamcast瀏覽器，但在iPad上也不例外。這個問題可以通過表格和iframe來修正，而不是正常的框架設置（cols和rows等）。

來源

2011-12-27 20:45:05 Andrew

position: fixed;

不中iOS 4的工作，但確實在iOS 5的工作

來源

2012-01-04 10:08:45 OZZIE

我不認爲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%;

左，右層，邊界消失。

來源

2012-01-12 10:59:39 user1145306

您現在可以通過-webkit-appearance: none;

來源

2015-05-29 19:06:48 kspearrin

「桌面Safari」上的已知「iPad上的Safari」列表

回答

相關問題