問題タブ [retina]

現在、箇条書きの代わりに使用している顧客の画像があります。次のCSSを使用して設定しましたが、正常に動作します。

問題は、私が使用している画像が、Retina 品質になるように意図的に必要なサイズの 2 倍になっていることです...しかし、弾丸として使用されている画像の高さを指定する方法を見つけることができないようですポイント...画像をRetinaとして表示する他の方法はありますか（24 x 24の実際のサイズではなく、12 x 12に縮小された2倍バージョン）？

angularjs アプリケーションの e2e テストには分度器を使用しています。の をチェックし、Retina スクリーンに高品質の画像を提供するために別の画像 URL を生成する機能がありdevicePixelRatioますwindow。

しかし、分度器でそれをテストする方法は? 分度器 API で指定できるオプションが見つかりません。

次のようなパラメーターを使用<link>してスタイルシートを作成できます。media

しかし、ファイル内でインライン化された画像を使用するdata-uriと、サイズが大きくなります。retina.css不要なときにこの余分なメガバイトをロードしたくありません。

だから私の質問は簡単です:media一致しない場合はロードされますか? (min-resolutionはこの場合よりも小さいです2dppx。)

とにかくロードされる場合、マッチjs時にのみロードするライブラリはありますか?media

バックグラウンド ビデオを使用して新しいクライアント スプラッシュ ページを作成しました。iPhone のレスポンシブ調整と iOS でのバックグラウンド ビデオの停止を除けば、Retina でテストすることは思い浮かびませんでした。

今日、MBP Retina で見ると、ビデオが高さの「正しいピクセル数」をカバーしているように見えますが、ビデオを強制的に「2x」をカバーする方法がわかりません。

この仕様について聞いたことがありますか？

ビデオ背景の最小高さ/最小幅を網膜の「 200% 」に設定するのと同じくらい簡単でしょうか?

使用されるマークアップ

CSSチャンク

スクリーンショットとリンク

ライブサイトへのリンク

Retina 解像度ディスプレイのスクリーンショット - (MBP 13" Retina)

UIView上書きで何かを描画する習慣があります

これは問題なく動作し、Retina スクリーンで鮮明な結果が得られます。

ただし、今は、図面の基になっているプロパティをアニメーション化できるようにしたいと考えています。アニメート可能なプロパティの作成は でのみ可能のようですCALayer。そのため、 で描画を行う代わりにUIView、カスタムCALayerサブクラスを作成し、内部で描画を行います。

drawRectこの関数では、 customの関数で使用したのとほぼ同じ描画コードを使用しますUIView。

結果は同じように見えますが、網膜の解像度ではなく、ピクセル化されています (大きな正方形のピクセル)。

私が入れたら

私のdrawInContext実装の最初に、ピクセル化された結果の代わりに、ぼやけた結果が得られます（レンダリングがまだ非網膜解像度で実行され、その後網膜解像度にアップスケールされているかのように）。

で鋭い網膜パスをレンダリングする正しい方法はCALayers drawInContext何ですか?

ここにいくつかのスクリーンショットがあります（青い線は問題のカスタム図面の一部です。黄色の部分は単なるイメージです）

カスタム UIView の内部に描画drawRect:

カスタム CALayer 内に描画drawInContext:

最初drawInContextに設定して、カスタム CALayer 内に描画します。self.contentScale

完全を期すために、(の簡略化されたバージョンの) 描画コードを次に示します。

私が達成したいことを言い換えると、UIViewアプローチと同じ鮮明な網膜レンダリングを達成したいのですが、CALayer

この非常に基本的な html の質問を投稿するのはばかげていると思いますが、完全に困惑しています。100x100 ピクセルのグラフィック (test@2x.png) を画像として提供し、50x50 にサイズ変更しています。これにより、Retina スクリーンと非 Retina スクリーンの両方で鮮明な画像が得られるはずですが、そうではありません (Chrome と Firefox では、Safari で問題ありません)。

同じ画像を 50x50 (CSS によるサイズ変更なし) で保存し、元の表示は 100% で問題ありませんが、元の 100x100 を縮小すると途切れ途切れになります。

技術的には、これがどのように発生する可能性があるのか​​ 理解できません。私が網膜スクリーンを持っていることを考えると、それは正反対のはずです.100％の画像はあまり鮮明ではなく、50％に拡大された2倍の画像は鮮明です.

私はこれを何千回も問題なく行ったに違いありません。何が起こっているのか誰にもわかりませんか?

フィドル: http://jsfiddle.net/pixeloco/84n141vc/

私が見ているもののスクリーンショット (iMac/retina サポート、Chrome v37): http://i.imgur.com/CS3sJOD.png

pictureFirefox でタグを使用しようとしています。caniuse.com によるとpicture、Firefox 33 (ベータ版) でサポートされており、Firefox 32 (現在) で手動でサポートを有効にできます。

html5rocks の例を開いたところ、動作しないことがわかりました。また、自分でhttp://vm-0.krasulya.kd.io/を試しました。srcwebinspector のネットワーク パネルでは、基本的なイメージ (属性) に対してのみ要求があります。

どちらの例も Chrome Canary で動作します。

http://www.whatwg.org/specs/web-apps/current-work/multipage/edits.html#the-picture-element HTMLによると正しいです。

FFpictureはまったくサポートしていますか？

UPD

ここに私のマークアップがあります:

すべてを表示するアプリを作成しますUIControls。私のアプリは Retina 4.0 で実行されています。すべての画面解像度でアプリを作成するには、どのコードを使用すればよいですか?

私のアプリでは、OOPS の概念を使用してデータを保存しています。私はクラスを作成し、Userユーザー名のプロパティを作成し、DOB オブジェクトで彼の写真を作成し、これらのオブジェクトを保持するビュー コントローラーで配列を作成しました。User詳細ビュー コントローラーでは、クラス タイプのプロパティを作成し、すべての情報を詳細ビュー コントローラーに表示します。

ビューコントローラーの検索バーを使用してユーザーを検索すると、アプリが終了します。私はこのコードを使用しました：

アプリで検索バー コントローラーを使用するにはどうすればよいですか?
また、アプリをすべての画面解像度で実行するにはどうすればよいですか?