タブレット ビューまたはモバイル ビューに縮小すると、ゲームが動作しません。通常のブラウザの状態のままだと問題なく動作するのですが、なぜかサイトがフリーズしたような状態です。ボタンをクリックしたり、数字を入力したり、ラジオ ボタンをクリックしたりすることさえできません。
これは、異なるCSSで異なるレイアウトを縮小する私のコードです:
<link href="styles/casino.css" rel="stylesheet" type="text/css">
<link href="styles/tablet.css" rel="stylesheet" type="text/css" media="handheld, only screen and (max-width:1024px), only screen and (max-device-width: 650px)">
<link href="styles/mobile.css" rel="stylesheet" type="text/css" media="handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px)">
<!--[if IEMobile]>
<link rel="stylesheet" type="text/css" href="/styles/mobile.css" media="screen" />
<![endif]-->
これが私のゲームフォームコードです:
<div id="game">
<div id="gameScreen">
<img src="images/roulettetable.jpg" class="desktop" height="413" width="100%" alt="Roulette Table" />
<img src="images/roulettetable.jpg" class="tablet" height="255" width="99%" alt="Roulette Table" />
<img src="images/roulettetable.jpg" class="phone" height="215" width="99%" alt="Roulette Table" />
<div id="info"><p>First Name: <span id="firstN"></span><br/>Last Name: <span id="lastN"></span><br/>Phone Number: <span id="phoneN"></span><br/>Postal Code: <span id="postalC"></span><br/>Amount: <span id="startA"></span></p></div>
<div id="cash"><p></p></div>
</div>
<div id="gameForm">
<form id="gameForm">
<label>Bet: </label>
<input type="text" value="0" id="bet" name="betAmount" onClick="if (this.value == '0') this.value='';" required/>
<label> 1-12: </label>
<input type="radio" name="temp" value="1-12" id="thirdOne" onClick="deselect()"/>
<label> 13-24: </label>
<input type="radio" name="temp" value="13-24" id="thirdTwo" onClick="deselect()"/>
<label> 25-36: </label>
<input type="radio" name="temp" value="25-36" id="thirdThree" onClick="deselect()"/>
<label>Single Number:</label>
<input type="number" name="num" id="num" min="00" max="36" onBlur="validateNum();"/><br/><hr/>
<label>Black:</label>
<input type="radio" name="temp" id="blackBet" value="Black" onClick="deselect()"/>
<label> Even: </label>
<input type="radio" name="temp" value="even" id="evenBet" onClick="deselect()"/>
<label for="halfTwo"> High: </label>
<input type="radio" name="temp" value="19-36" id="halfTwo" onClick="deselect()"/><br/>
<input type="button" name="spin" value="Spin!!!" id="spin" onClick="spinIt();" />
<label>Red:</label>
<input type="radio" name="temp" id="redBet" value="Red" onClick="deselect()" />
<label> Odd: </label>
<input type="radio" name="temp" value="odd" id="oddBet" onClick="deselect()" />
<label> Low: </label>
<input type="radio" name="temp" value="1-18" id="halfOne" onClick="deselect()"/>
<input type="button" name="leave" value="Leave Game" id="leave" onClick="window.location = 'outcome.html'"/>
</form>
</div>
</div>