1

これまでに作成したアプリは 1 つだけで、1 つのプロジェクトを使用して Android アプリと IOS アプリの両方を作成することはできませんでした。私は 2 つのプロジェクトを作成しなければなりませんでしたが、実際の違いは css ファイルだけでした。メディア クエリを作成して、同じ css ファイル内の両方のデバイスの正しいイメージを正しく取得する方法を理解できませんでした。

これが一般的な解決策なのか、それとも IOS と Android の両方に適切な画像を正しくロードできる信頼できる css ファイルがあるのか​​ 疑問に思っていますか?

4

2 に答える 2

2

メディア クエリの代わりに、Javascript とPhoneGap デバイス APIを使用してプラットフォーム検出を行うこともできます。

PhoneGap ドキュメントの例:

// Depending on the device, a few examples are:
//   - "Android"
//   - "BlackBerry"
//   - "iOS"
//   - "webOS"
//   - "WinCE"
//   - "Tizen"
var devicePlatform = device.platform;

そして、プラットフォームによっては、css ファイルを動的にロードできます。

css ファイルを動的にロードする例:

var link = document.createElement("link");
link.href = "http://example.com/mystyle.css";
link.type = "text/css";
link.rel = "stylesheet";
document.getElementsByTagName("head")[0].appendChild(link);

ソース: https://stackoverflow.com/a/9345038/702478

于 2013-04-22T15:09:36.630 に答える
0

別のアプローチとして、デバイスの幅を検出する代わりに、ピクセル比率の検出に焦点を当てています。これまでのところ、これはより信頼できるようです。

css ファイルでは、基本クラスを使用してから 2x クラスを使用します。

.some-image { background-image: url(../images/1x/icons/someicon.png);
              height:32px;
              width:32px;
 }

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
/* 2x version of image */

    .some-image { background-image: url(../images/2x/icons/someicon.png);
                  height:32px;
                  width:32px;

    }

}
于 2013-04-22T14:51:22.210 に答える