問題タブ [retina]

ミックスインを動的に変更するにはどうすればよいですか。次のようにlessファイルを呼び出したいと思います：

次に、ミキシングを次のようにセットアップしようとしています。

しかし、「undefined のメソッド 'slice' を呼び出せません」のようにビルドするとエラーが発生し続けます。

「facebook」のような 1 つの名前を呼び出して、ミックスインの網膜バージョンと非網膜バージョンの両方を実行する方法はありますか?

私はこのコードを持っています:

smi.png - シンプルな画像です

私はsmi2.pngを持っています- それは網膜画像です

このコードで 2 つの画像を設定するにはどうすればよいですか?

私が取り組んでいるサイトでは、retina.js ( http://imulus.github.io/retinajs/ ) を使用して、特に網膜デバイス用の網膜イメージの非網膜イメージを切り替えています。このサイトはレスポンシブ HTML Web サイトです (Twitter Bootstrap を使用)。問題は次のとおりです。ページが Retina デバイスに読み込まれると、Retina デバイスが image@2x.jpg に切り替わるため、画像が切り替わってしまいます。これは今のところ問題ありません。問題は、ブラウザーのウィンドウのサイズを変更して (Retina 画像が読み込まれた後)、ブラウザーの幅を小さくすると、画像の幅は正常にサイズ変更されますが、高さは同じままで、画像が垂直方向に効果的に押しつぶされ、画像が歪むことです。向きを変更すると、iPad と iPhone でまったく同じことが起こります。

これが前の画像です：

そして、ブラウザの幅を小さくしてサイズを変更した後の画像は次のとおりです。

以前にこの問題を経験した人はいますか?

通常表示用 (350px x 43px) と網膜用 (700px x 86px) の 2 つの画像を作成しました。以下のコードを使用すると、画像の変更に関して想定どおりにすべてが機能しますが、hi-res.jpg は 700px x 86px の実際のサイズで表示されていますか? 私は網膜グラフィックスにまったく慣れていないため、これを修正する正しい方法がわかりません。両方の画像は、幅 350 ピクセル、高さ 43 ピクセルの div 内にある必要があります。

Retina ディスプレイでは 1 インチあたりのピクセル数が非常に多いため、より大きな画像が必要になるのではないかと考えました。より大きな画像を作成しましたが、それを div 内に含めて正しく表示するにはどうすればよいですか?

HTML

助けてくれてありがとう。私はこれを修正するためにあらゆる種類のcssを試してきました!

Retina デバイスで @2x 画像を提供するために、サイトで retinaJS を使用しています。

また、jQuery を使用して @2x 画像を網膜なし (大画面のデスクトップ デバイス) にサーバーできるようにしたいと考えています。したがって、画面解像度が 1330px を超える場合、@2x をファイル名の末尾のファイル サフィックス/拡張子の直前に追加できるようにしたいと考えています。

誰かがこれを行う方法を提案できますか?

私の理論は、ターゲット DIV (.bodycontent など) 内のすべての画像を検索し、属性 src から 4 文字を逆算して、@2x を src に追加することでした。

例えば

example.jpg は example@2c.jpg になり、chickens.png は Chickens@2x.png になります。

もちろん、これは png / jpg などの 3 文字の拡張子を持つファイルでのみ機能しますが、ファイルを JPEG と呼ぶことはないので問題ありません...

ターゲット DIV にあるすべての画像に適用するコードが必要です。

何か助けはありますか？

乾杯

この関数は、@2x を適用する必要があることを確認するためにサイズ変更ごとに呼び出されます。 @2x が既に attr src に含まれているかどうかを確認するコードを追加し、既に @2x である場合はこれを実行しないようにするにはどうすればよいですか?

以下のリンクの続きです

Retina 対応の画像の準備 (web)

非常に多くの単語が人によって意味が異なるため、これは明確化です。Retina デバイスと非 Retina デバイスの両方で適切に見える 1 つの画像があるようです。

画面上の画像の最大幅を 400、最大高さを 300 にする場合、画像自体は 800 x 600、ppi は 144 にする必要があります。次に、ダウンロード時間を最小限に抑えるために、ファイルを高度に圧縮する必要があります。

画像を表示するときは、次のように css/html コードを使用して最大幅と最大高さに強制します。

これは正しいです？(当社ではresponsive.jsやcdnを使用しないことは既に解決済みです。)

私はそのコードに問題があります:

まったく同じように見えるはずで、エディターでも同じです。iPad2でも全く同じに見えますが、iPad3では一番上のGUI.Buttonが約90%縮小されています。

何が問題になる可能性がありますか？

問題の簡単な例を示します。これがiPad2でどのように見えるかです。

そして、これがRetinaスクリーンでどのように見えるかです：

赤い部分がボタンで、最初は背景全体をカバーしていますが、2番目は90％程度しかカバーしていません.

これは IE 9 および 10 だけの問題ではなく、5.1.7 などの古いバージョンの Safari でも発生します。

SVG 画像スプライトを使用したいのですが、最新バージョンの Chrome、Firefox、および IE では問題なく表示されますが、IE 9 および 10 では画像が押しつぶされ、正しいサイズで表示されません。

この JS フィドルを表示してください: http://jsfiddle.net/NGSM3/3/ IE 9、IE 10、または Safari 5.1.7 で問題を確認してください。これには引き続きイメージ スプライトを使用したいのですが、それらを SVG イメージ スプライトに更新したいと考えています。

私のHTML：

私のCSS：

目標は、ゲーム キャンバスを高解像度 / Retina にすることです。

私は Gamemaker というソフトウェアを使用しており、このキャンバスを高解像度/網膜にしたいと考えています。私はこれをどのように移植するかについての本当の考えはありませんが。

問題を非常に明確に説明している 2 つのリンクを次に示し ます http://www.smashingmagazine.com/2012/08/20/towards-retina-web/ および http://www.html5rocks.com/en/tutorials/canvas/hidpi /

これは、ゲームを起動するために html5 ページが使用するコードです。

ゲームの JavaScript ファイルが読めません。

javascriptキャンバス全体を高解像度/網膜にする方法を教えてください。

Retina 固有の js を実行する目的で Retina デバイスでcontentcss プロパティを設定することに何か問題があると思いますか?body

これは、Retina デバイスをテストするための最もシンプルで軽量なクロスブラウザー ソリューションのように思えます。少なくとも私にとってはうまくいきました...

CSS:

jQuery でテストします。