这是页面在 chrome 中的样子
和
这是页面在 Firefox 中的样子
我正在使用的网站在 chrome 调试器(和我的 android 手机)中没有响应，但在 firefox 调试器中工作正常。我需要帮助修复它。
我还需要帮助将五个按钮变成单选按钮。并将翻译按钮设为切换按钮。
我用过的代码如下。
.NoDisplay {
display: none;
}
.Qustion {
margin-top: 25px;
height: 100%;
}
.card-header {
padding: 8px;
padding-left: 15px;
padding-right: 15px;
background-color: #fff;
height: 50%;
}
.instructionsContainer {
text-align: center;
}
.progress {
height: 10px;
margin: 0;
}
.QustionHeading {
font-size: 1.2rem;
font-weight: 500;
margin-bottom: 5px;
;
}
.InstructionsHeading {
font-size: 1.1rem;
font-weight: 500;
margin-bottom: 7px;
}
.instructionText {
margin: 0;
font-weight: 410;
}
.QustionText {
font-weight: bold;
font-size: 1.3rem;
margin-bottom: 10px;
}
.optionsContainer {
text-align: left;
margin: auto;
display: block;
width: 100%;
margin-top: 20px;
}
.OptionsBtn {
width: 100%;
margin-top: 10px;
margin-bottom: 10px;
}
.OptionsBtn::selection {
color: #fff;
background-color: #000;
}
.card-footer {
text-align: none;
}
.TranslateBtn {
margin-left: 0;
display: block;
width: 100%;
font-size: 1.5rem;
font-weight: 400;
}
.TranslateBtn:checked {
background-color: #000;
color: #fff;
}
.NextBtn {
margin-right: 0;
display: block;
width: 100%;
font-size: 1.5rem;
font-weight: 400;
}
. @media (max-width: 768px) {
.optionsContainer {
text-align: left;
margin: auto;
display: block;
width: 100%;
margin-top: 20px;
}
.OptionsBtn {
width: 100%;
margin-top: 10px;
margin-bottom: 10px;
font-size: 1rem;
}
}<!DOCTYPE html>
<html>
<head>
<title>test page</title>
<title>TP Portal -- Jokes</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<!-- <div class="loader-wrapper screen1" id="loadImg">
<img src="V-ReapLogoAnimation.svg" class="loaderImage" alt="loeading" />
</div>
<div class=" section-left " id="leftOverlay"></div>
<div class=" section-right " id="rightOverlay"></div> -->
<div class="Container-main">
<div class="screen3">
<div class="row">
<div class="col-lg-2"></div>
<div class="col-lg-8 col-md-12">
<div class="card text-center Qustion Qustion1">
<div class="card-header">
<div class="ProgressBar">
<h2 class="QustionHeading">Qustion No 5</h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="70" style="width:50%">
</div>
</div>
</div>
<!-- <hr />
<div class="instructions">
<h2 class="InstructionsHeading">==> Instructions <== </h2>
<p class="instructionText">
Select one of the options below to indicate how well the statement describes you
</p>
</div> -->
</div>
<div class="card-body">
<h2 class="QustionText">I look for things that need to be done.</h2>
<div class="optionsContainer">
<button class="btn OptionsBtn" type="radio" name="qustion1" value="5">vary well</button>
<br />
<button class="btn OptionsBtn" type="radio" name="qustion1" value="4">vary well</button>
<br />
<button class="btn OptionsBtn" type="radio" name="qustion1" value="3">vary well</button>
<br />
<button class="btn OptionsBtn" type="radio" name="qustion1" value="2">vary well</button>
<br />
<button class="btn OptionsBtn" type="radio" name="qustion1" value="1">vary well</button>
</div>
</div>
<div class="card-footer">
<div class="row">
<div class="col-6">
<button class="btn TranslateBtn" id="TranslateBtn1">Translate</button>
</div>
<div class="col-6">
<button class="btn NextBtn">Next</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-2"></div>
</div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>最佳答案
我在 Reddit 上找到了答案。我必须添加行
<meta name="viewport" content="width=device-width, initial-scale=1.0">
到我的 HTML 文件的标题
关于html - 我正在使用的网站在 chrome 调试器(和我的 android 手机)中没有响应，但在 firefox 调试器中工作正常。我需要帮助修复它，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50899846/