私は、ネイティブアプリのように見える必要がある phonegab フレームの webapp に取り組んでいます。私が遭遇する問題は、さまざまな電話/画面サイズに調整する方法が正確にわからないことです. さまざまな電話/画面サイズに合わせてアプリをカスタマイズして、要素が画面からはみ出さないようにし、画像とテキストを電話の画面サイズに合わせて適切なサイズにしたいと考えています。
解決策を見つけたと思ったのですが、うまくいかないようです。以下の CSS コードは、私がどのように対処したかの例です。「@media screen and (max-device-height: ..px) and (orientation: Portrait)」を使用して、最も一般的な画面サイズの画像のサイズと要素間の距離を変更しようとしました。最初に、デスクトップのブラウザ画面のサイズを変更してテストしましたが、問題なく動作するようです。ブラウザを大きくしたり小さくしたりすると、要素間の距離と画像のサイズが変わりました。しかし、私がテストした電話 (htc wildfire と samsung gt-i5800) は、これらのコードに応答しないようです。Htc ワイルドファイアの画面サイズは 240x320 ですが、このタグ「@ media screen and (max-device-height: 320px) and (orientation: Portrait)」の後ろに配置したコードには応答しません。
[編集: htc の山火事は '@ メディア画面と (max-device-height: 480px) と (orientation: Portrait) に応答します。また、samsung gt-i5800 は '@ media screen および (max-device-height: 533px) および (orientation: Portrait) に応答します。そのため、両方の電話のディスプレイの高さは、電話が応答するメディア タグの「max-device-height」とは異なります]
私が間違っていること、またはより良いアプローチを知っていることを誰が教えてくれますか? ありがとうございました！
（私の悪い英語でごめんなさい）
.Header {padding-top:20px}
.buttons {padding-top:5px}
.welcomeImg {padding-top:20px;padding-left:8px;width:250px;}
@media screen and (max-device-height: 685px) and (orientation: portrait){
.Header {padding-top:35px}
.buttons{padding-top:20px}
.welcomeImg {padding-top:40px;width:260px;}}
@media screen and (max-device-height: 533px) and (orientation: portrait){
.Header {padding-top:30px}
.buttons {padding-top:15px}
.welcomeImg {padding-top:35px;width:250px;}}
@media screen and (max-device-height: 480px) and (orientation: portrait){
.Header {padding-top:17px}
.buttons {padding-top:2px}
.welcomeImg {padding-top:22px;width:250px;}}
@media screen and (max-device-height: 400px) and (orientation: portrait){
.Header {padding-top:24px}
.buttons {padding-top:0px}
.welcomeImg {padding-top:25px;width:180px;} }
@media screen and (max-device-height: 320px) and (orientation: portrait){
.Header {padding-top:17px}
.buttons {padding-top:0px}
.welcomeImg {padding-top:18px;width:130px;}}
[編集: ここでこの記事を読みました: http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html 著者は、異なるデバイス幅を持っているように振る舞う電話について書いています:
「このタグについて説明するのが最も簡単です。Apple は、人々がコンテンツを iPhone の画面に合わせられるようにするために意図的に正確にタグを発明し、開発者にそれをプッシュしました。つまり、デバイスの幅を読み取りどおりに変更する余裕がないことを意味します。今タグでアウト。
実際、Nexus One は、Apple が従うべき道をすでに切り開いています。公式の画面幅 (ポートレート モード) は 480 ピクセルですが、タグを適用すると、画面幅が公式の幅の 2/3 である 320 ピクセルであるかのように動作します。"
それは私にいくつかの疑問を残します。ここでも同じ問題がありますか？これはよくある問題ですか？これに対する良い回避策はありますか？]