格尺寸相对于屏幕尺寸

Question

I'm programming a html5 app with JQuery Mobile and Phonegap. 我与编程jQuery Mobile的和PhoneGap的一个HTML5应用。 I want to run them on many different devices. 我想在许多不同的设备上运行它们。 Because of that, I want to have everything relative to screen size. 因此，我想拥有与屏幕尺寸相关的所有内容。

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

I use this div Element to display a google map inside with a little border around. 我用这个div元素显示谷歌地图里面大约有少许边界。

How can I adjust the size for example 80% of the screen size? 如何调整尺寸，例如屏幕尺寸的80％？

I tried it with width: 90%; 我尝试了宽度：90％； height: 90%, but the result is really bad. 身高：90％，但结果确实很糟糕。 Its not relative to screen, it lokks like relative to the content. 它不是相对于屏幕，而是相对于内容。

And the size of the border is fixed with 5px, is it possible to insert here a nice argument to have it relative to screen size? 边框的大小固定为5px，是否可以在此处插入一个漂亮的参数使其相对于屏幕大小？

I hope someone can help! 我希望有人能帮帮忙！

Thanks! 谢谢！

Answer 1

A html element, set to width: 100% , stretches to a 100% of it's parents width. 设置为width: 100%的html元素，拉伸到其父元素width: 100%的100% 。 You need to make sure that the containing elements widths are also 100% . 您需要确保包含元素的宽度也是100% 。

You also need to make the html and body width 100% . 您还需要使html和body宽度为100% 。

An example: 一个例子：

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

This example assumes the #pos element is straight on the body. 本示例假定#pos元素在主体上是笔直的。

Answer 2

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

Answer 3

looks good, so I think the problem is because of JQuery! 看起来不错，所以我认为问题是因为JQuery！ Here is my complete code of this page: 这是此页面的完整代码：

<!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