1

私は phonegap アプリケーションに取り組んでいます。縦表示専用です。4 インチを超えるデバイスでは、画面が非常に小さく見え、コンテンツ (jQueryMobile フォーム コントロール) の下に 2/5 の空きスペースがあり、空きスペースを埋めるために、フォントや高さなどのサイズを大きくするオプションがありましたが、そうではありませんでした高さ 3.2 インチの小さなデバイスでは、フィールドとフォント サイズが大きくなるので、これは良いことです。

そのため、デバイスの高さに応じて計算した後、font-size を設定しています。デバイスに合うように、幅と高さの両方でフォントサイズが大きくなるため、幅に対してフォントサイズが大きいため、フォントと要素がめちゃくちゃになりました。これは、計算されたサイズを小さくすることで解決できます。しかし問題は、一部のデバイスは高さが 5.3 インチで、幅が 3.2 インチの電話と同じであることです。

私の要件は、画面に正確に収まり、空のスペースがないようにすることではなく、十分なスペースを埋め、ほとんどのデバイスで同じように見えることです。したがって、パーセンテージや「em」などの異なる単位を使用して、このことを達成する他の方法がある場合、それらのソリューションは大歓迎です。そして、どんな努力も高く評価されます。

4

1 に答える 1

0

この問題を解決するには、css を利用する必要があります。各要素のcssスタイルをパーセンテージにします。例えば。以下の例を言ってみましょう

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
 <html lang="en">
 <head>
     <title></title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <style>
                *{
                margin:0;
                padding:0;
                }


    html{
        width:100%;
        height:100%;
        }

        body{
        width:100%;
        height:100%;
        }

            .header{
            position:relative;
            background:blue;
            width:100%;
            height:20%;
            }

            .content{
             position:relative;
            background:pink;
            width:100%;
            height:60%;
            }
            .row1{
            width:100%;
            height:100%;
            }
            .footer{
             position:relative;
            background:green;
            width:100%;
            height:20%;
            }
 </style>


</div>

<div  class="content">
 <div  class="row1">
 <img 

src="http://media1.santabanta.com/full1/Emotions/Love/love-130v.jpg" style="width:100%; height:100%" />
     </div>
    </div>

    <div  class="footer">

     </div>
     </body>
 </html>
于 2013-10-10T02:27:39.533 に答える