私はこのチュートリアルの後でクイズを作成しようとしています:https://www.sitepoint.com/simple-javascript-quiz/ 私は論理にあまり触れず、ブートストラップインテグレーション(メタビューポートタグ)を追加しました。参考までに、私は論文の変更なしで試しましたが、私の問題はまだそこにあります。JavaScriptで生成された要素が常にモバイルで重複しています
クイズはかなり簡単ですが、私はモバイルデバイスで動作させるのに苦労しています。問題は、問題の本当の原因を理解することができず、正確に記述するのが難しいことです。
このチュートリアルでは、質問とその回答はjavascriptによって生成され、その下のナビゲーション/送信ボタンは生成されないため、質問/回答が生成されるコンテナの最小高さを設定する必要があります。それがなければ、ボタンはjs生成コードの前に表示され、ボタンは質問/回答コンテナの上に表示されます。非常に論理的:
<div class="quiz-container">
<div id="quiz">JS generated Questions and Anwsers go here</div>
</div>
<button id="previous"><<</button>
<button id="next">>></button>
<button id="submit">Submit</button>
<button id="reset">Reset</button>
<span id="results"></span>
それは、モバイル上のデスクトップが、それほどではないに正常に動作します:https://i.imgur.com/buu2PBJ.png の回答や質問は、私は彼らのラジオ要素に提出するには良い答えを追加している、特に以来、クイズが使用できなくなり、重複していますより重複して生成されます。
私はCSSでモバイルで別の最小高さを設定しようとしましたが、 "vh"単位を使って試しましたが、マージン/パディングで再生しようとしましたが、私は何をしても常にモバイルで見えます。実際には、ボタンの周りの余白やパディングを変更すると、デスクトップビューには影響がありますが、モバイルには影響しません。要素は常に同じ方法でオーバーラップします。
私は、モバイル上のページの構造上、私が理解していないロジックがあると確信していますが、多くの研究や試行にもかかわらず、私は本当にそれに指をかけられません。
ご存知ですか?