web-dev-qa-db-ja.com

「デスクトップSafari」に対する「iPadのSafari」の既知の違いのリスト

最近、Windows/Macデスクトップブラウザー上で、そしてiPad上でWebアプリケーションをテストしたところ、Safariには予期していなかったさまざまな違いに気付きました。バージョン＃が同じであっても。

開発者の参考として、これらの違いのリストを作成します（自分と他の人のために）。

例：iPadのSafariで

  • iPad Safariは、選択リスト/オプションスタイリングを完全に制御します
  • 入力要素がフォーカスを受け取るとiPadがオンスクリーンキーボードを開くため、インラインフローティングカレンダーウィジェット（など）が期待どおりに機能しない（または変更する必要がある）
  • iPad Safariは、デスクトップSafari <iOS 5のような_position:fixed_をサポートしていません
  • iPad Safari（iPhone/iPodTouch Safariに類似）は、10桁の数字を自動的にハイパーリンクして、電話番号/連絡先オプションを提供します
  • iPad Safari Prompt('long message...','default');は、メッセージの1行のみを表示します（ただし、メッセージのスクロールは可能です）

特定のJavaScriptが動作しないなどを他の人から聞いたことがありますが、まだ完全にテストしていないので、遭遇した可能性のある発見に感謝します。

ipadsafarirenderingvariations
56
scunliffe

あなたのためにもう少し：

  1. フラッシュなし
  2. お粗末なiFrameサポート
  3. 奇妙なキャッシングの制限
  4. HTML textAreasにはスクロールバーがありません（ダブルフィンガースワイプする必要があります-もちろん、驚くほど直感的です）

一般に。縮小されたデスクトップではなく、拡大されたiPhoneのように扱います。

12
Michael Mullany

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>

（青い境界線はボタンの場所を示すためのものであり、ハックにとって重要ではありません）

4
divestoclimb

jQueryのoffset（）が機能しません： http://bugs.jquery.com/ticket/6446

4
alalonde

これは役に立つと思いました： iPad用のWebコンテンツを準備するためのAppleのガイド

位置によってキャッチされた：私の問題を修正

4
Ranguard

IPad Safariにはoverflow:auto;の要素に関する問題があるため、スクロールバーが表示されるはずです（ divとiframeのテストページ ）。

3
scunliffe

iPadブラウザーはファイルのアップロードをサポートしていません（iPadには標準のファイルブラウザーがないため、サポートしていても役に立たないでしょう）。 [ファイルの選択]ボタンがグレー表示されたファイルフィールドが表示されます。

3
rubyprince

iPad Safariでは、まれに背景画像の処理に問題があり、下に横たわるコンテンツの奇妙な線が表示されるようです。

Googleにはこれについてはまだ多くはありません（まだ）。

3
Damien

-webkit-appearance: none;でリセットすることにより、iOSで選択リストのスタイルを制御できるようになりました

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

左右のレイヤーの境界線が消えます。

2
user1145306

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>
2
leon

私は現在、iframe youtube apiを多用する小さなレスポンシブWebアプリに取り組んでいます。どうやら、iPad版のsafariは、このプロジェクトで頻繁に使用するいくつかのhtml5メソッドをサポートしていません。

それらの1つはwindow.postMessageです。これは、他のページのスクリプト（たとえば、そのiframe内で使用されるスクリプト）と対話する方法です。ビデオの自動再生も機能しません。

1
Julian

特定のファイルサイズを超える24ビット透明PNGは、iPad2でレンダリングされません。
ただし、レンダリングするには同じサイズの8ビットのものを取得できます。
レンダリングに使用するために、この最大ファイルサイズがわからない。

1
PlanetPUSH

このルールは、iOSデバイスのSafariでのアニメーションのちらつきを修正します。

body {-webkit-transform:translate3d(0,0,0);}
1
Brian D'Astous

IPad Safariにはバグがあり、背景画像と背景色の両方を含むCSS要素が、背景色の色のわずかな境界線でレンダリングされます。レンダリングされた要素の端まで背景画像で塗りつぶす必要があります。

1
jkg0

フレームの問題。 iPad Safariは、スクロールバーを非表示にし、フレームをコンテンツのサイズに拡大します。 scrolling="yes"およびnoresize="noresize"を含むようにフレームタグを変更しても、何も実行されないようです。一部のサイトは、Dreamcastブラウザーでもすべてのもので正常に表示されますが、iPadでは表示されません。この問題は、通常のフレーム設定（列や行など）の代わりにテーブルとiframeを使用して修正できます。

1
Andrew
position: fixed;

IOS 4では動作しませんが、iOS 5では動作します。

0
OZZIE

また、モバイルサファリではcontenteditableがサポートされていないこともわかりました。したがって、プレーンtextareaを使用する方が良い方法です。 Apple Developer Docs

0
scunliffe