1

こんにちは、このjavascriptコードをブラウザで全画面表示する方法を教えてもらえますか?コードはうまく機能していますが、大きなデバイスでは小さすぎるように見えます...何を変更すればよいかわからないので、助けてくれてありがとう:)

     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title></title>
        <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
        <meta content="width=device-width; initial-scale=1.0; maximum-scale=2.0; user-scalable=1;" name="viewport" />
        <style type="text/css">
html{background-color:transparent;height:100%;width:100%;}
    body{background-color:transparent;font-size:15pt;font-family:helvetica;color:white;}
    img{border:0px;}        </style>
    </head>
    <body>
        <!-- MAGIC 8 BALL START --><script>
var t0;
var ar8Ball = new Array;
ar8Ball[0]="Lookin' Good,<br> Right On!";
ar8Ball[1]="Sock It To Me, <br> Ask Again";
ar8Ball[2]="Hey Joe,<br>I Doubt It";
ar8Ball[3]="Outlook Along The Watchtower Not So Good";
ar8Ball[4]="Yeah Man!";
ar8Ball[5]="Outta Sight!";
ar8Ball[6]="Nope,<br> Peace Out";
ar8Ball[7]="Mellow Out,<br>Tell You Later";
ar8Ball[8]="My Foxy Ladies <br> Say No";
ar8Ball[9]="Don't Count On It,<br> Sucka";
ar8Ball[10]="I Can Dig It";
ar8Ball[11]="No Doubt <br>Brothas & Sistas";
ar8Ball[12]="Yes,<br> Can You Dig It?";
ar8Ball[13]="Righteous!";
ar8Ball[14]="Far Out!";
ar8Ball[15]="Excuse Me While I Kiss The Sky,<br> Ask Later";
ar8Ball[16]="Groovy Baby, <br> Yes";
ar8Ball[17]="Reply Purple Hazy, <br> Try Again";
ar8Ball[18]="Most Likely, <br> My Voodoo Child";
ar8Ball[19]="You Have To Go On <br> And Be Crazy";


function randomize(lo,hi)
{ return (lo + Math.floor(Math.random()*((1+hi)-lo)));
} 

function ksa8Ball()
{
  self.clearTimeout(t0);
  o = document.getElementById('theBall');
  v = '<div id=theBall style=">';
  v = v + ' width: 250px; height:380px;';
  v = v + '">';
  v = v + '<a href="javascript:ask8Ball();">';
  v = v + '<img border=0 src="jimiask1.jpg">';
  v = v + '</a>';
  v = v + '</div>';
  o.innerHTML = v;   
}

function ask8Ball()
{
  o = document.getElementById('theBall');
  v = '<div id=theBall style="';
  v = v + ' width: 250px; height:380px;';
  v = v + ' background-repeat: no-repeat;';
  v = v + ' background-image:url(jimianswer1.jpg);';
  v = v + ' text-align: center;';
  v = v + ' font-family: Arial;';
  v = v + ' font-size: 18pt;';
  v = v + ' color: #000000;';
  v = v + '"><br><br>';
  v = v + ar8Ball[randomize(0,19)];
  v = v + '</div>';
  o.innerHTML = v;
  t0 = self.setTimeout('ksa8Ball()',1 * 2500);
}
</script>
        <div style="
background-color: #000000;">
            <center>
                Just think of your question and click on Jimi
                <div id="theBall" style="width:250px; height:380px;">
                    <a href="#" onclick="ask8Ball();"><img border="0" src="jimiask1.jpg" /></a></div>
                <!-- MAGIC 8 BALL STOP --></center>
            <a href="#" onclick="ask8Ball();"> </a></div>
        <p>
            <a href="#" onclick="ask8Ball();"> </a></p>
        <p>
            <a href="#" onclick="ask8Ball();">&nbsp;</a></p>
        <p>
            <a href="#" onclick="ask8Ball();"> </a><a href="#" onclick="ask8Ball();"> </a></p>
    </body>
</html>
4

1 に答える 1

1

あなたの主な問題は次の行にあると思います:

<div id="theBall" style="width:250px; height:380px;">

サイズをハードコーディングしました。

したがって、サイズに応じてフォントやすべてを変更できるように適応可能にしたい場合は、スタイルシートが最適です。

ブラウザ ウィンドウのサイズを取得したい場合は、次を参照してください。

http://www.java-samples.com/showtutorial.php?tutorialid=1015

次に、それがわかっている場合は、適切なデバイス サイズ (小/大) の css タグを動的に追加できます。

次に、css で、フォント、div の幅/高さ、およびその他の変更したいものを設定します。

于 2012-04-15T15:29:54.343 に答える