59

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

開発者向けのリファレンスとして、（私自身と他の人のために）それらの違いのリストを作成したいと思います。

例：iPadのSafari

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

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

4

17 に答える 17

13

あなたのためにさらにいくつか：

  1. フラッシュなし
  2. お粗末な iFrame のサポート (そのため、Facebook などは iPad 用のカスタム実装が必要です)
  3. 奇妙なキャッシュ制限
  4. HTML textAreas にはスクロール バーがありません (二本指でスワイプする必要があります - もちろん、これは驚くほど直感的です)

一般に。縮小したデスクトップではなく、拡大した iPhone のように扱ってください。

于 2010-07-10T01:42:04.167 に答える
4

jQuery の offset() が機能しない: http://bugs.jquery.com/ticket/6446

于 2011-03-17T19:39:16.107 に答える
4

iPad の Safari には、iPhone と同じボタン幅/パディングの問題があります。

iPhone <ボタン> パディングは変更できませんか? この問題と、テキストを含むボタンのパディングを削除するための解決策について説明していますが、ボタンをパディング自体よりも狭くしたい場合 (たとえば、小さなアイコンしかないボタンの場合) には役に立ちません。そのためには、幅とオーバーフローが定義された外側の要素でボタンを囲む必要がありました。

<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-30T21:05:40.673 に答える
4

私はこれが役に立つかもしれないと思った: Apple's guide to prepare web content for the iPad

位置に引っかかっただけです：自分の問題を修正しました

于 2010-06-16T15:27:31.563 に答える
3

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

これについては、Google では (まだ) あまり情報がありません。

于 2010-11-19T13:45:08.063 に答える
3

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

于 2011-06-06T11:22:33.390 に答える
3

また、iPad Safari には要素に問題がoverflow:auto;あるため、スクロールバーを表示する必要があるようです ( div と iframe を含むテスト ページ)。

于 2010-06-11T14:31:32.203 に答える
2

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-21T06:00:19.253 に答える
2

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

于 2015-05-29T19:06:48.310 に答える
2
背景画像と背景色の両方を持つ 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-12T10:59:39.807 に答える
1

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

于 2010-12-26T02:59:52.277 に答える
1

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

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

于 2011-11-28T23:02:41.523 に答える
1

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

于 2011-08-25T14:44:24.523 に答える
1

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

body {-webkit-transform:translate3d(0,0,0);}
于 2010-10-14T14:34:54.060 に答える
1

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

于 2011-12-27T20:45:05.060 に答える
0

モバイルサファリではサポートされていないことも発見しcontenteditableたため、プレーンを使用することをおtextarea勧めします。Apple 開発者ドキュメント

于 2011-06-22T13:20:19.620 に答える
0 
position: fixed;

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

于 2012-01-04T10:08:45.300 に答える