問題タブ [retina]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
html - Retina 画面で Web サイトを表示すると、低解像度の画像がぼやけて見えるのはなぜですか?
500 x 500 ピクセルの画像がある場合、通常のディスプレイでは画像が鮮明に見えます (つまり、CSS ピクセルが 1:1 でデバイス ピクセルにマップされます)。しかし、この画像を Retina ディスプレイで表示すると、画像のすべてのピクセルを 4 つの Retina ピクセルにマッピングする必要があります (解像度は 2 倍になります)。Retina ディスプレイでも、画像は 500 x 500 CSS ピクセルで表示されますが、1000 x 1000 にスケーリングされます。物理的なサイズが同じであるため、Retina 画面で画像がぼやけて見える理由がよくわかりません。は同じサイズです。
ぼかしは 4 ピクセル間のスペースの結果ですか?
画像: http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/
css - Retina 画像がクロムで暗く見える
div の Retina 背景画像を設定しました。Firefox では正しく表示されますが、Chrome では暗く見えます。この問題を解決するにはどうすればよいですか? フィドルを参照
HTML
CSS
retina - mobify.js を使用して Retina 対応の画像を作成できますか?
mobify.js を使用して Retina 対応の画像を作成できますか? 既に作成された画像を Retina フレンドリーにする方法について、より多くの情報を見つけようとしています。
css - Retina pixelratio メディア クエリを使用する Internet Explorer 8
SASS/Compass を使用してレスポンシブ Web サイトを構築しており、(生成されたスプライトを使用して) Retina アイコンを含めています。mixin を使用して .scss にアイコンを含めます。
私の網膜アイコンミックスイン：
変数：
使用法：
私が抱えている問題は、Internet Explorer 8 が Retina スプライトを として使用していbackground-imageて、background-size. IE8 がサポートされていないbackground-sizeため無視されることはわかっていますが、これはアイコンの配置が正しくないことを意味します。
JavaScript を使用すると、現在のピクセル比率を確認できます。
これは次のように警告します: undefinedInternet Explorer で。私の「網膜メディアクエリ」undefinedが有効な数値として受け入れ、その css を実行するのはなぜですか? これに対する回避策はありますか?
android - Nexus 10 で Retina スクリーンを検出し、高解像度スプライト XXX_2x.png を使用する
Telerik の Kendo UI フレームワークを使用して Android アプリケーションを開発しています。アプリは高密度 Retina スクリーン (Nexus 10) で実行されており、Kendo スプライトは非常に小さく表示されます。
フォルダーには高密度のスプライト PNG があります (例: sprite.png & sprite_2x.png)。ただし、私が高解像度の画面を使用しているにもかかわらず、Kendo フレームワークは低解像度バージョンを提供しているようです。
アプリ内で : alert(window.devicePixelRatio) を実行すると、値 2 (高解像度画面) が取得されますが、低解像度の sprite.png が提供されます。
CSS スタイルシート内に、高解像度スプライトを使用するための定義があります。
HTML ファイルでは、メタ ビューポートは次のように定義されています。
誰かが何が問題なのか知っていますか?
どうもありがとう
javascript - Retina ディスプレイと非 Retina ディスプレイの背景画像を作成する
状況
HTML ページの背景画像は固定位置に表示し、画面全体またはウィンドウ全体に表示する必要があります (タブレットやスマートフォン以外のデバイスの場合)。
背景画像はImageShackを使用して作成されます。これまでのところ問題はありません。
現在の進捗状況を示すためにプランクを作成しました。
問題
Retina 以外のデバイス (Dell ノートブック) では、画像が正常にレンダリングされ、ページの背景全体が塗りつぶされているように見えます。
私のiPhone（網膜）では、画像は高解像度画像として明確に表示されません。
私の現在の解決策
この例で使用される JavaScript コードは次のとおりです。
質問
- 高解像度の「網膜」背景画像を設定するには、どの CSS 設定を使用する必要がありますか?
- iPhone の (表示されている) 画面全体を満たす背景画像を作成するにはどうすればよいですか?
更新：私の解決策
mcmac の回答はある程度の洞察をもたらしましたが、それは私が探していた回答ではありませんでした。Retina 画面に高解像度の画像を表示するために、背景画像のパラメーターを設定する方法を理解したかっただけです。
解決策は非常に簡単です。
a) background-size の使用
を使用する場合background-size、実際の画像は画面の 2 倍のサイズ (各方向) である必要があり、background-sizeプロパティは画面のサイズである必要があります (私が行ったこととは対照的に: 画面の半分のサイズ):
b) 固定画像の使用
R3tepが提案したように、背景画像の代わりに、通常の固定画像を使用できます。その場合、画像のサイズは画面上の画像のサイズの 2 倍にする必要があり、CSS はheight: 100%; width: 100%.
javascript - ウェブサイトが Retina ディスプレイには大きすぎる
私のウェブサイトは Retina ディスプレイで非常に大きく見えます。すべてのフォントと div 要素は、Chrome で表示されるものよりも大きくなっています。どうすればこれを修正できますか？