格尺寸相对于屏幕尺寸

Question

我与编程jQuery Mobile的和PhoneGap的一个HTML5应用。 我想在许多不同的设备上运行它们。 因此，我想拥有与屏幕尺寸相关的所有内容。

<div id="pos" data-role="content"
        style="border: 5px solid silver; margin-left: auto; margin-right: auto; width: 250px; height: 250px;">

我用这个div元素显示谷歌地图里面大约有少许边界。

如何调整尺寸，例如屏幕尺寸的80％？

我尝试了宽度：90％； 身高：90％，但结果确实很糟糕。 它不是相对于屏幕，而是相对于内容。

边框的大小固定为5px，是否可以在此处插入一个漂亮的参数使其相对于屏幕大小？

我希望有人能帮帮忙！

谢谢！

Answer 1

设置为width: 100%的html元素，拉伸到其父元素width: 100%的100% 。 您需要确保包含元素的宽度也是100% 。

您还需要使html和body宽度为100% 。

一个例子：

html, body { width: 100%; }
#pos { width: 80%; }

本示例假定#pos元素在主体上是笔直的。

Answer 2

您可能需要定义父母的身高和宽度，如果您不想在这里使用js，我在jsfiddle上做了一个示例jsfiddle

Answer 3

看起来不错，所以我认为问题是因为JQuery！ 这是此页面的完整代码：

<!DOCTYPE html>
<html>
<head>
<title> App</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>

<style>

  html, body, geolocation { width: 100%; height: 100%; } 
  #pos { width: 80%; height: 80%; } 

</style>
</head>

 <body>
<div data-role="page" id="geolocation" data-theme="a">
    <h2 align="center">Geolocation</h2>
    <div data-role="header" data-position="fixed" data-theme="a">
        <h1>Car Data</h1>
    </div>

    <div id="pos" data-role="content" style="border: 5px solid silver;">
        Deine Position wird ermittelt...</div>

    <script type="text/javascript" src="geolocation.js"></script>


    <div data-role="footer" data-position="fixed" data-id="persFooter">
        <div data-role="navbar">
            <ul>
                <li><a href="home.html" data-icon="home">Connect</a></li>
                <li><a href="carView.html" data-icon="gear">Vehicles</a></li>
                <li><a href="infoView.html" data-icon="info">Info</a></li>
            </ul>
        </div>
    </div>


<script>                                       
    $('#geolocation').on('swipeleft',function(){ 
     $.mobile.changePage("fuelGauge.html", { transition: "slide"}); 
     console.log('slideLeft');
    })  

    $('#geolocation').on('swiperight',function(){ 
     $.mobile.changePage("batteryStatus.html", { transition: "slide", reverse: 'true'});    
     console.log('slideLeft');
    })                                       
</script>
</div>



  </body>
  </html>

格尺寸相对于屏幕尺寸

问题描述

3 个解决方案

解决方案1
0 2012-07-20 07:42:48

解决方案2
0 2012-07-20 07:57:37

解决方案3
0 2012-07-20 09:23:32

格尺寸相对于屏幕尺寸

问题描述

3 个解决方案

解决方案1 0 2012-07-20 07:42:48

解决方案2 0 2012-07-20 07:57:37

解决方案3 0 2012-07-20 09:23:32

解决方案1
0 2012-07-20 07:42:48

解决方案2
0 2012-07-20 07:57:37

解决方案3
0 2012-07-20 09:23:32