9

私はdivを持っていて、デバイスの表示密度に関係なく、同じ量の画面スペースを占めるようにする方法を見つけようとしています。

たとえば、それぞれ幅5インチのデバイスが2つあるとします。最初のディスプレイにはdevice-pixel-ratio=1があり、2番目のディスプレイにはdevice-pixel-ratio=2があります。

Device 1: 5 inches wide, device-pixel-ratio=1
Device 2: 5 inches wide, device-pixel-ratio=2

したがって、2番目のデバイスには2倍のピクセルが同じスペースに詰め込まれています。

私のdivスタイル：

.myDivStyle {
    width: 100px;
    height: 50px;
}

私が正しく理解していれば、デバイス2はデバイス1の半分の幅/高さでdivをレンダリングしているように見えます。

その場合、デバイスに依存しないユニットで幅/高さを定義する方法はありますか？または、device-pixel-ratio属性を調べた後、ページの読み込みなどですべてのスタイルを手動でスケーリングする必要がありますか？

ありがとうございました

4

3 に答える 3

3

unitを使用して CSS サイズを再定義するemとよいでしょう。

このリファレンスのいくつかの良いリンク。これらをチェックしてください

  1. w3.org
  2. w3.org
  3. css-トリック

上記のリンクはすべて、emドキュメントをさまざまなデバイスで適切に動作させたい場合に最適です。

于 2012-11-27T15:32:28.237 に答える
0

ほとんどのデバイスは次の 3 つの解像度に分類されます。 1) HVGA - VGA の半分 (320 x 240) 2) WVGA - ワイド VGA (800 x 480) - HVGA のほぼ 1.5 倍 3) HVGA 2x - (640 X 960) - IPHONE 4 はこの解像度を使用します

上記の 3 つの解像度に対して個別の css ファイルを作成します。

@Media screen and (min-width: 320px) and (max-width: 480px){
/* css files here*/
}

また

@Media screen and (min-device-pixel-ratio: 2)
{/* css files here*/

}

他の解像度でも同じことを行います。1 つの解像度で作成された css クラスは、完全なビューを得るために、3 つの解像度すべてにコピー ペーストする必要があります。このようにして、完璧なデバイス固有のスタイルを紹介できます

于 2012-11-27T15:35:04.457 に答える
0

これは、ピクセルではなくパーセンテージで作業する必要があるように思えます。したがって、画面の「割合」の量を使用します

.myDivStyle {
    width:  50%;
    height: 25%;
}

ピクセルの量の問題を解決します。Iphone と Android の画面で作業している場合、これらは 2 つの完全に異なる解像度を使用するため、これで問題が解決します。たとえば、Iphone は 320 を使用していると思いますが、私の Samsung Galaxy は 480 を使用していると思います。(本当の価値がわからない)

于 2012-11-27T15:06:56.077 に答える