問題タブ [resolution-independence]

レスポンシブ Web サイト/アプリを作成するためのさまざまな代替手段を調査してきましたが、モバイル デバイス用の解像度に依存しないものを見つけることができません。

特定の解像度のすべてのモバイル デバイスで同じように見えるレイアウトを探しています。例:モバイル ブラウザ用のGoogle Plus サイト。LG G3 (1440 x 2560)とiPhone 5S (640 x 1136)で chrome mobile を使用してサイトを開きましたが、サイトはまったく同じように見え、デスクトップ サイトはほとんど反応しません。

ブートストラップ 3 グリッド システムを使用してきましたが、ブートストラップはビューポートの解像度を使用します。

私の質問は次のとおりです。このタイプのレイアウトを実現するにはどうすればよいですか?

私はアプリを持っていて、それにグラフィックを配置したいと考えています。2048 x 1536 (iPad) などの高解像度でグラフィックを作成した場合、解像度の低い他のデバイスに適切にダウンスケールする方法はありますか? 私の目標は、さまざまなデバイス (@2x、iPad など) 用に n バージョンのグラフィックを作成しないようにすることです。それらはすべて、基本的に同じ画像を Photoshop で縮小しただけです。非常に高解像度のグラフィックスを 1 つ作成し、iOS で自動的に縮小したいと思います (比率を維持します)。

現在、次の計算を使用して、フォントスケールの解像度を独立して計算しています。

そして、次のコードを使用して、フォントを互いに相対的に配置しています。

私は完全に混乱しています。テキストは 8 インチ タブレットでは互いの内側に表示されますが、携帯電話では完全に正しく配置されています。

この解像度を独立して正しく配置するにはどうすればよいですか?

透過 PNG をカラー イメージとアルファ イメージに分解することで、そのダウンロード サイズを小さくしようとしています。このアプローチは問題なく機能します。私の顧客の画像では、サイズが 50% 以上縮小されています。

画像を再構成するために、SVG とキャンバスの両方を試しています。

SVG ソリューションは不透明マスクを使用し、キャンバスは globalCompositeOperation を使用します。

問題は、(CSS でサイズを指定するか、SVG で直接指定することによって) 縮小すると、SVG が誤って暗いエッジを表示することです。これらの暗いエッジは、入力画像と同じサイズで SVG をレンダリングする場合には表示されません。キャンバスは正常に動作します。これは、私がテストしたすべてのブラウザー (Chrome、IE11、Firefox) で発生します。

私が信じている問題は、SVG がアルファ イメージとカラー イメージのサイズを個別に変更してから、不透明マスクを適用することです。ただし、このアプローチは機能しません。画像処理では、透明な画像のサイズを変更するには、色成分にアルファを事前に乗算してから標準のサイズ変更アルゴリズムを使用するか、加重平均を実行する必要があることはよく知られています (ほとんどの透明なピクセルは最終的な色への影響が少ない)。たとえば、このディスカッションを参照してください

SVG フィルター効果を適用する場合、最初に使用される中間解像度を微調整できますが、SVG マスク プロパティを使用する場合にこれを行う方法がわかりません (Robert Longson は、フィルター効果がこれをサポートしていないことを正しく指摘しました)。属性が廃止されたため、filterResもう）

SVGコードは次のとおりです（HTML5準拠のブラウザーで私のWebサイトから直接実行します）

これらのエッジ アーティファクトが表示されないように SVG マスク効果を微調整する方法を知っている人はいますか?

どうもありがとう、

ピーター