css - 通过 Mac Web Inspector 对 CSS Safari IOS 进行故障排除时，用户代理样式表被锁定
问题描述
我在 PC 上开发了一个网页，但在 Safari 移动设备上遇到了 CSS 问题。“计算”按钮上的文本未居中。在各种 Iphone 的 Chrome 电脑模拟器上，一切看起来都很好。
我已通过 USB 链接将 Iphone 连接到 Apple 桌面，以便对移动版本进行故障排除。不幸的是，它显示“用户代理样式表”被锁定。我可以向元素添加样式属性，但无法更改页面加载时存在的属性。
如何解锁用户代理样式表？
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gradient Calculator</title>
<meta name="description" content="Calculate the average gradient of a cycling climb.">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/Gradient-Calculator.css">
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,500" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<script src="js/gradient-calculator.js"></script>
</head>
<html>
<div id="wrapper">
<div id="inputs">
<div id="button-outer" class="outer">
<button tabindex="1" id="english-button" class="toggle-button">English</button>
<button tabindex="2" id="metric-button" class="toggle-button">Metric</button>
<i tabindex="3" id="delete-icon" class="fas fa-times-circle fa-2x delete"></i>
</div>
<div id="distance-outer" class="outer">
<div class="titles" id="distance-desc">Climb Length In Miles</div>
<input id="distance-input" type="number"><i class="fas fa-times-circle delete" id="delete1"></i>
</div>
<div id="height-outer" class="outer">
<div class="titles" id ="height-desc">Climb Height In Feet</div>
<input id="height-input"type="number"><i class="fas fa-times-circle delete" id="delete2"></i>
</div>
<div id="peak-outer" class="outer">
<div class="titles" id="peak-desc">Peak Elevation In Feet</div>
<div id="fiets">what is fiets?</div>
<input id="peak-input" type="number"><i class="fas fa-times-circle delete" id="delete3"></i>
</div>
<div id="calculate-outer" class="outer">
<button id="calculate-button" class="big-button" >Calculate</button>
</div>
</div>
<div id="modal-outer">
<div id="modal-inner">
<!-- <i class="fas fa-times-circle delete" id="delete4"></i> -->
<div id="fiets-info">
The FIETS Index was created by the Dutch cycling magazine "FIETS" as a way to compare the toughness between climbs. The formula takes into account the length, altitude gained, and final altitude of the climb. Measuring the peak elevation allows the index to weigh the increased difficulty of climbing as atmospheric oxygen decreases.
<br>
<br>
<a href="https://www.pjammcycling.com" >PJAMM Cycling</a> has an outstanding website with a database of over 4,000 climbs. Using the FIETS Ranking allows you to compare your favorite local climbs with climbs all over the world.
</div>
</div>
</div>
<div id="output">
<div id="output-data" >
<div class="outputs" id="english-output"></div>
<div class="outputs" id="metric-output"></div>
<div class="outputs" id="gradient-output"></div>
<div class="outputs" id="fiets-output"title="What's This?"> </div>
</div>
<div>
</div>
</div>
</html>
CSS
html, body {
background: radial-gradient(circle, rgba(237,88,19,1) 0%,
rgba(158,59,13,1) 50%, rgba(108,46,17,1) 100%);
color: white;
height: 100%;
width: 100%;
padding: 0;
margin: 0;
font-family: 'Quicksand', sans-serif;
font-weight: 400;
font-size: 24px;
text-align: center;
}
#wrapper {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#output {
display: none;
font-size: 30px;
margin-left: 5%;
margin-bottom: 5%;
}
.outer {
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
margin-top: 20px;
}
.titles {
margin-bottom: 5px;
}
.titles:hover {
cursor: default;
}
#metric-button {
color: white;
background-color: rgb(80,80,80);
border-color: rgb(80,80,80);
border-style: solid;
box-shadow:
3px 3px rgba(0,0,0,.15);
}
#english-button {
background-color: black;
color: white;
border-color: black;
border-style: solid;
box-shadow: 3px 3px rgba(0,0,0,.15);
}
#metric-button:hover {
box-shadow: -1px -1px rgba(158,59,13,1), 3.5px 3.5px rgba(0,0,0,.25);
transition-duration: .15s;
}
#english-button:hover {
box-shadow: -1px -1px rgba(158,59,13,1), 3.5px 3.5px rgba(0,0,0,.25);
transition-duration: .15s;
}
.toggle-button {
height: 60px;
cursor: pointer;
}
#button-outer {
margin-bottom: 20px;
align-self: center;
justify-self: center;
}
.fa, .fas {
color: black;
}
input {
background:black;
text-align: center;
color:white;
max-width: 360px;
border-color: black;
}
input:focus {
outline: black;
}
.big-button{
text-decoration: none;
background: black;
color: rgb(221, 78, 12);
cursor: pointer;
border-radius: 50%;
text-align: center;
border: 2px solid black;
height: 150px;
width: 150px;
font-size: 30px;
box-shadow: -1px -1px 22px -4px rgba(255,255,255,0.425),
3px 3px 3px 0px rgba(0,0,0,0.425);
display: inline-block;
}
.big-button:hover {
box-shadow: -1px -1px 22px 0px rgba(255,255,255,0.425),
1px 1px 22px 0px rgba(255,255,255,0.425);
transition-duration: 0.3s;
}
.big-button:focus {
outline: none;
box-shadow: -1px -1px 22px 4px rgba(255,255,255,0.425),
1px 1px 22px 4px rgba(255,255,255,0.425);
transition-duration: 0.3s;
}
.big-button:active {
outline: none;
animation: shake 0.4s;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.small-button{
text-decoration: none;
background: black;
color: rgb(221, 78, 12);
cursor: pointer;
border-radius: 50%;
text-align: center;
border: 2px solid black;
height: 100px;
width: 100px;
font-size: 20px;
box-shadow: -1px -1px 22px -4px rgba(255,255,255,0.425),
3px 3px 3px 0px rgba(0,0,0,0.425);
}
.small-button:hover {
box-shadow: -1px -1px 22px 0px rgba(255,255,255,0.425),
1px 1px 22px 0px rgba(255,255,255,0.425);
transition-duration: 0.3s;
}
.small-button:focus {
outline: none;
box-shadow: -1px -1px 22px 4px rgba(255,255,255,0.425),
1px 1px 22px 4px rgba(255,255,255,0.425);
transition-duration: 0.3s;
}
.small-button:active {
outline: none;
animation: shake 0.4s;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
::placeholder {
color: rgb(80,80,80);
opacity: 1;
}
:-ms-input-placeholder {
color: rgb(80,80,80);
}
::-ms-input-placeholder {
color: rgb(80,80,80);
}
.delete {
cursor: pointer;
}
.delete:hover {
color: rgb(80,80,80);
}
#delete-icon {
vertical-align: middle;
}
#delete4 {
margin-left: 490px;
display: inline-flex;
}
#fiets {
font-size: 22px;
color:rgb(80,80,80);
font-weight: bold;
font-variant: small-caps;
margin-bottom: 5px;
margin-top: -10px;
}
#fiets:hover {
color: white;
cursor: pointer;
}
#out-border {
border: 2px solid black;
margin: 3px;
z-index: 3;
background: radial-gradient(circle, rgba(237,88,19,1) 0%,
rgba(158,59,13,1) 50%, rgba(108,46,17,1) 100%);
}
#mid-border {
border: 1px solid rgba(108,46,17,1);
margin: 2px;
z-index: 4;
}
#in-border {
border: 2px solid black;
margin: 2px;
z-index: 5;
}
#output-data {
padding: 10px;
background: linear-gradient(0deg, rgba(57,57,57,1) 0%, rgba(70,70,70,1) 44%, rgba(96,95,95,1) 84%);
box-shadow: 7px 7px rgba(0,0,0,.15),
-1px -1px 32px -16px rgba(255,255,255,0.425),
-1px -1px 9px 0px rgba(255,255,255,0.425);
z-index: 6;
}
.outputs {
color: white;
}
.outputs:hover {
cursor: default;
}
@media (max-width: 450px) {
#fiets-info {
font-size: 15px;
}
}
@media (max-width: 400px) {
input {
width: 150px;
}
.titles {
font-size: 18px;
}
.toggle-button {
height: 50px;
}
}
@media (max-width: 850px) {
#output {
font-size: 24px;
}
}
@media (max-width: 710px) {
#wrapper {
flex-flow: column;
}
#inputs {
margin-top: 20px;
margin-bottom: -10px;
}
#output {
margin-left: 0px;
margin-top: 15px;
}
.outer {
margin-top: 10px;
margin-bottom: 10px;
}
}
@media (max-height: 530px) {
#wrapper {
height: auto;
}
}
@media (max-width: 374px) and (max-height: 666px) {
#output {
font-size: 18px;
}
.out {
margin-top: 10px;
margin-bottom: 10px;
}
}
#modal-outer {
display: grid;
background: hsla(50, 100%, 90%, 0.7);
position: fixed;
height: 100vh;
width: 100vw;
top:0;
left:0;
justify-content: center;
align-items: center;
z-index: 7;
opacity: 0;
pointer-events: none;
}
.modal-outer.open {
opacity: 1;
pointer-events: all;
}
#modal-inner {
display: grid;
border-radius: 5px;
margin-left: auto;
margin-right:auto;
max-width: 80%;
padding: 20px;
background: radial-gradient(circle, rgba(237,88,19,1) 0%,
rgba(158,59,13,1) 50%, rgba(108,46,17,1) 100%);
}
#delete4-container {
height:fit-content;
}
a {
color:#0b72c4;
text-decoration: none;
}
Javascript
function fietsInfoPopup() {
const modalOuter = document.getElementById("modal-outer");
modalOuter.style.opacity = "1";
modalOuter.style.pointerEvents = "all";
}
function closeFietsInfoPopup() {
const modalOuter = document.getElementById("modal-outer");
modalOuter.style.opacity = "0";
modalOuter.style.pointerEvents = "none";
}
function buttonSize() {
const calculateButton = document.getElementById("calculate-button");
const outputDiv = document.getElementById("output");
const mediaQuerySmall = window.matchMedia('(max-width: 710px)');
const mediaQueryBig = window.matchMedia('(min-width: 710px)');
if (mediaQuerySmall.matches && outputDiv.style.display === "flex") {
calculateButton.classList.replace('big-button', 'small-button');
}
if (mediaQueryBig.matches && outputDiv.style.display === "flex") {
calculateButton.classList.replace('small-button', 'big-button');
} if (mediaQuerySmall.matches && outputDiv.style.display === "none") {
calculateButton.classList.replace('small-button', 'big-button');
} if (mediaQueryBig.matches && outputDiv.style.display === "none") {
calculateButton.classList.replace('small-button', 'big-button');
}
}
function clearAll() {
const distanceInput = document.getElementById("distance-input");
const heightInput = document.getElementById("height-input");
const peakInput = document.getElementById("peak-input");
const gradientOutput = document.getElementById("gradient-output");
const englishOutput = document.getElementById("english-output");
const metricOutput = document.getElementById("metric-output");
const fietsOutput = document.getElementById("fiets-output");
const output = document.getElementById("output");
const calculateButton = document.getElementById("calculate-button");
distanceInput.value = "";
heightInput.value = "";
peakInput.value = "";
gradientOutput.innerHTML = "";
englishOutput.innerHTML = "";
metricOutput.innerHTML = "";
fietsOutput.innerHTML = "";
calculateButton.classList.toggle('big-button');
calculateButton.classList.toggle('small-button');
distanceInput.focus();
output.style.display = "none";
}
function deleteOne() {
const distanceInput = document.getElementById("distance-input");
const gradientOutput = document.getElementById("gradient-output");
const englishOutput = document.getElementById("english-output");
const metricOutput = document.getElementById("metric-output");
const fietsOutput = document.getElementById("fiets-output");
const output = document.getElementById("output");
const calculateButton = document.getElementById("calculate-button");
distanceInput.value = "";
gradientOutput.innerHTML = "";
englishOutput.innerHTML = "";
metricOutput.innerHTML = "";
fietsOutput.innerHTML = "";
calculateButton.classList.toggle('big-button');
calculateButton.classList.toggle('small-button');
distanceInput.focus();
output.style.display = "none";
}
function deleteTwo() {
const heightInput = document.getElementById("height-input");
const gradientOutput = document.getElementById("gradient-output");
const englishOutput = document.getElementById("english-output");
const metricOutput = document.getElementById("metric-output");
const fietsOutput = document.getElementById("fiets-output");
const output = document.getElementById("output");
const calculateButton = document.getElementById("calculate-button");
heightInput.value = "";
gradientOutput.innerHTML = "";
englishOutput.innerHTML = "";
metricOutput.innerHTML = "";
fietsOutput.innerHTML = "";
calculateButton.classList.toggle('big-button');
calculateButton.classList.toggle('small-button');
heightInput.focus();
output.style.display = "none";
}
function deleteThree() {
const peakInput = document.getElementById("peak-input");
const fietsOutput = document.getElementById("fiets-output");
const output = document.getElementById("output");
peakInput.value = "";
peakInput.focus();
fietsOutput.innerHTML = "<span id='fiets-output' style='font-variant:small-caps; font-size:18px;'>enter peak elevation for fiets</span>";
}
function englishConvert() {
const englishButton = document.getElementById("english-button");
const metricButton = document.getElementById("metric-button");
if (englishButton.style.backgroundColor = "rgb(80,80,80)") {
englishButton.style.backgroundColor = "black";
englishButton.style.borderColor = "black";
metricButton.style.backgroundColor = "rgb(80,80,80)";
metricButton.style.borderColor = "rgb(80,80,80)";
}
}
function metricConvert() {
const englishButton = document.getElementById("english-button");
const metricButton = document.getElementById("metric-button");
if (metricButton.style.backgroundColor = "rgb(80,80,80)") {
metricButton.style.backgroundColor = "black";
metricButton.style.borderColor = "black";
englishButton.style.backgroundColor = "rgb(80,80,80)";
englishButton.style.borderColor = "rgb(80,80,80)";
}
}
function convert() {
const englishButton = document.getElementById("english-button");
const metricButton = document.getElementById("metric-button");
const distanceDesc = document.getElementById('distance-desc');
const heightDesc = document.getElementById('height-desc');
const peakDesc = document.getElementById('peak-desc');
const distanceInput = document.getElementById("distance-input");
const heightInput = document.getElementById("height-input");
const peakInput = document.getElementById("peak-input");
const gradientOutput = document.getElementById("gradient-output");
const englishOutput = document.getElementById("english-output");
const metricOutput = document.getElementById("metric-output");
const fietsOutput = document.getElementById("fiets-output");
if (englishButton.style.backgroundColor === "black") {
distanceDesc.innerHTML = "Climb Length In Miles";
heightDesc.innerHTML = "Climb Height In Feet";
peakDesc.innerHTML = "Peak Elevation In Feet";
calculate();
} if (metricButton.style.backgroundColor === "black") {
distanceDesc.innerHTML = "Climb Length In Kilometers";
heightDesc.innerHTML = "Climb Height In Meters";
peakDesc.innerHTML = "Peak Elevation In Meters";
calculate();
}
}
function calculate() {
let A; /* English Distance Miles*/
let B; /* English Height Feet*/
let C; /* Metric Distance KMs*/
let D; /* Metric Height Meters */
let E; /* Gradient Output */
let F; /*English Distance to Number*/
let G; /*English Height to Number*/
let H; /*Metric Distance to Number*/
let I; /*Metric Height to Number*/
let J;
let K;
let L; /*English Dropdown Fiets formula*/
let M; /*Metric Dropdown Fiets formula*/
let N; /*English Peak Input*/
let O;
const englishButton = document.getElementById("english-button");
const metricButton = document.getElementById("metric-button");
const distanceInput = document.getElementById("distance-input");
const heightInput = document.getElementById("height-input");
const peakInput = document.getElementById("peak-input");
const gradientOutput = document.getElementById("gradient-output");
const englishOutput = document.getElementById("english-output");
const metricOutput = document.getElementById("metric-output");
const fietsOutput = document.getElementById("fiets-output");
const output = document.getElementById("output");
const calculateButton = document.getElementById("calculate-button");
if (englishButton.style.backgroundColor === "black") {
A = distanceInput.value;
B = heightInput.value;
C = A * 1.60934; /*kms*/
D = B * .3048; /*meters*/
E = B / (A * 5280) * 100;
F = Number(A);
G= Number(B);
N = peakInput.value * .3048;
Y = peakInput.value;
if ((A == null || A == "") || (B == null || B == "")) {
output.style.display = "none";
if (distanceInput.value === "") {
distanceInput.focus();
} else {
heightInput.focus();}
} else {
output.style.display ="flex";
document.activeElement.blur();
buttonSize();
}
if (N > 1000) {
L = (D * D) / (C * 10000) + ((N - 1000)/1000);
} if (N < 0) {
peakInput.value = "";
peakInput.placeholder = "Must be at or above sea level.";
} else {
L = (D * D) / (C * 10000);
}
englishOutput.innerHTML = F.toFixed(2) + " Miles " + G.toFixed(0) + " Feet";
metricOutput.innerHTML = C.toFixed(2) + " KM " + D.toFixed(0) + " Meters";
gradientOutput.innerHTML = E.toFixed(2) + "% Average Gradient";
if (Y == null || Y == "" || Y < 0) {
fietsOutput.innerHTML = "<span id='fiets-output' style='font-variant:small-caps; font-size:18px;'>enter peak elevation for fiets</span>";
} else {
fietsOutput.innerHTML = L.toFixed(2)+ " FIETS Ranking";
}
} if (metricButton.style.backgroundColor === "black") {
C = distanceInput.value;
D = heightInput.value;
E = D / (C * 1000) * 100;
H= Number(C); /*KMs*/
I = Number(D); /*Meters*/
J = H * .621371;
K = I * 3.28084;
Z = peakInput.value;
if ((C == null || C == "") || (D == null || D == "")) {
output.style.display = "none";
if (distanceInput.value === "") {
distanceInput.focus();
} else {
heightInput.focus();}
} else {output.style.display = "flex";
document.activeElement.blur();
buttonSize();
}
if (Z > 1000) {
M = (I * I) / (H * 10000) + ((Z - 1000)/1000);
} if (Z < 0) {
peakInput.value = "";
peakInput.placeholder = "Must be at or above sea level.";
} else {
M = (I * I) / (H * 10000);
}
englishOutput.innerHTML = J.toFixed(2) + " Miles " + K.toFixed(0) + " Feet";
metricOutput.innerHTML = H.toFixed(2) + " KM " + I.toFixed(0) + " Meters";
gradientOutput.innerHTML = E.toFixed(2) + "% Average Gradient";
if (Z == null || Z == "" || Z < 0) {
fietsOutput.innerHTML = "<span id='fiets-output' style='font-variant:small-caps; font-size:18px;'>enter peak elevation for fiets</span>";
} else {
fietsOutput.innerHTML = M.toFixed(2) + " FIETS Ranking";
}
}
}
window.addEventListener('load', function(e) {
englishConvert();
const englishButton = document.getElementById("english-button");
const metricButton = document.getElementById("metric-button");
const calculateButton = document.getElementById("calculate-button");
const peakInput = document.getElementById("peak-input");
const deleteIcon = document.getElementById("delete-icon");
const delete1 = document.getElementById("delete1");
const delete2 = document.getElementById("delete2");
const delete3 = document.getElementById("delete3");
const distanceInput = document.getElementById("distance-input");
const output = document.getElementById("output");
const fietsInfo = document.getElementById("fiets");
const delete4 = document.getElementById("delete4");
const modalOuter = document.getElementById("modal-outer");
const modalInner = document.getElementById("modal-inner");
distanceInput.focus();
englishButton.addEventListener('click', englishConvert);
metricButton.addEventListener('click', metricConvert);
englishButton.addEventListener('click', convert);
metricButton.addEventListener('click', convert);
calculateButton.addEventListener('click', calculate);
deleteIcon.addEventListener('click', clearAll);
deleteIcon.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode ===13) {
deleteIcon.click();
}
});
delete1.addEventListener('click', deleteOne);
delete2.addEventListener('click', deleteTwo);
delete3.addEventListener('click', deleteThree);
deleteIcon.addEventListener('click', buttonSize);
delete1.addEventListener('click', buttonSize);
delete2.addEventListener('click', buttonSize);
delete3.addEventListener('click', buttonSize);
window.addEventListener('resize', buttonSize);
fietsInfo.addEventListener('click', fietsInfoPopup);
window.addEventListener("keydown", (event) => {
if (event.key === "Escape") {
closeFietsInfoPopup();
}
if (event.key === "Backspace") {
closeFietsInfoPopup();
}
});
modalOuter.addEventListener("click", function (event) {
const isOutside = !event.target.closest("#modal-inner");
if (isOutside) {
closeFietsInfoPopup();
}
});
});
解决方案
推荐阅读
- docker - 使用 network_mode: "host" 公开一个 docker 组成的容器，并将容器保持在容器网络中
- java - 转换设置为可迭代
- django - Django：如何将 test_func 重定向到 403 禁止页面而不是登录
- python - 如何获得带有字母的下一个单元格？
- ios - 在 iOS Swift 中并行运行两个循环
- c# - 如何使用 CMake 构建 C# DLL？
- mysql - 统计特定年龄段使用身份证号码的人数
- android - 如何检查 CheckBoxPreference 是否被选中？
- c++ - 为 Visual Studio 2017 设置 Curl：NMAKE：致命错误 U1073：不知道如何制作 '..\src\tool_hugehelp.c'
- sql - 在 SQL 中结合 WHERE EXISTS 和 IN