0

JQueryMobileとPhonegapを使用してhtml5アプリをプログラミングしています。さまざまなデバイスで実行したいと思います。そのため、画面サイズに応じてすべてを用意したいと思います。

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

このdiv要素を使用して、周囲に小さな境界線があるGoogleマップを内部に表示します。

たとえば画面サイズの80％など、サイズを調整するにはどうすればよいですか？

幅90％で試してみました。高さ：90％ですが、結果は本当に悪いです。それは画面に関連しているのではなく、コンテンツに関連しているように見えます。

そして、境界線のサイズは5pxに固定されていますが、画面サイズに相対的なものにするための良い引数をここに挿入することは可能ですか？

誰かが助けてくれることを願っています！

ありがとう！

4

3 に答える 3

0

見た目が良いので、問題は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>
于 2012-07-20T09:23:32.300 に答える
0

ここで js を使用したくない場合は、親の高さと幅を定義する必要があるかもしれません。私は jsfiddle jsfiddleで例を作成しました

于 2012-07-20T07:57:37.950 に答える
0

に設定された html 要素は、その親の幅にwidth: 100%引き伸ばされます。100%含まれている要素の幅も であることを確認する必要があり100%ます。

htmlまた、body幅を作成する必要があります100%。

例：

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

この例では、 #pos 要素が本体にまっすぐにあると想定しています。

于 2012-07-20T07:42:48.510 に答える