Cordova 平台特定 CSS答案

【问题标题】：Cordova Platform Specific CSSCordova 平台特定 CSS
【发布时间】：2021-04-12 15:34:52
【问题描述】：

我有一个用绳子制作的应用程序。我只在 android 上使用它，现在我决定在 IOS 上测试它，我注意到这些 CSS 错误。

如何修复这些仅出现在 IOS 应用程序中的错误？

如果有用的话，我会把我的css文件贴在下面。

是否必须在 css 中添加 hack 才能被 IOS 解释？

输入

.form-group {
    background-color: white;
    padding: 5px;
    margin-bottom: 15px;
    border-bottom: 1px solid #a7a7a7;
    border-radius: 1px;
    height: 47px;
}

.form-group label {
    display: inline-block;
    margin-bottom: 7px;
    float: left;
    font-size: 14px;
}

.form-group input[type=text],input[type=password],input[type=number],select,textarea {
    width: 100%;
    border: 0px;
    font-weight: 600;
    font-size: 17px;
    background-color: white;
    text-transform: uppercase;
    outline: none;
}

.form-group input[type=date],input[type=datetime-local] {
    width: 100%;
    border: 0px;
    font-weight: 600;
    font-size: 17px;
    background-color: white;
    text-transform: uppercase;
    outline: none;
}

*:focus {
    outline: none;
}

checkbox.css

input[type=checkbox] {
  position: relative;
  cursor: pointer;
   margin: 0 13px 10px 0;
}
input[type=checkbox]:before {
  content: "";
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  background-color:#FFF;
  border: solid 1px #CCC;
}
input[type=checkbox]:checked:before {
  content: "";
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  background-color:#1E80EF;
}
input[type=checkbox]:checked:after {
  content: "";
  display: block;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 3px;
  left: 8px;
}

radio.css

.form-group-radio {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.form-group-radio span {
    float: left;
}

/* Hide the browser's default radio button */
.form-group-radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.form-group-radio .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.form-group-radio:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.form-group-radio input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.form-group-radio .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.form-group-radio input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.form-group-radio .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

【问题讨论】：

标签： css ios cordova

【解决方案1】：

我不会仔细阅读您的代码，因为它太靠猜测了。我对您的建议是始终使用 chrome 进行开发，然后在 Safari 中再次测试。你会发现 Safari 并不支持/尊重 Chrome 所做的一切，CSS 明智。

例如，iOS webview 很难使用 flex box 甚至是粘性。需要为 Safari 打很多补丁。所以你的代码可能是合法的，但 iOS webview 不会完全支持它。

您还可以使用 cordova 检测您正在运行的平台 (device.platform)，然后您可以将 .ios 类添加到您的主体并通过 .ios 类进行修补

【讨论】：