1

我正在开发一个 phonegap 应用程序。它仅适用于纵向视图。在超过 4 英寸的设备上，我的屏幕看起来很小，内容下方有 2/5 的空白空间（jQueryMobile 表单控件），为了填充空白空间，我可以选择增加字体和高度等的大小，但那不是很好，因为它将在 3.2 英寸高的小型设备上具有更大的字段和字体大小。

所以我根据设备的高度进行了一些计算后设置字体大小，看起来更好。因为它适合设备，但随着字体大小在宽度和高度上的增加，字体和元素变得混乱，因为字体大小相对于宽度更大。这可以通过减小计算的大小来解决。但问题是有些设备高 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 回答