为什么Datepicker无法在移动设备上正常工作？

Question

我正在研究this site。以某种我不了解的方式，它在移动设备上崩溃了。

在台式机上：

在移动设备（Chrome浏览器）中：（在三星浏览器中工作正常）

这是我为datepicker定制的CSS。

.datepicker {
  background-color: #fff !important;
}

.datepicker thead tr:nth-child(2) {
  background-color: #f5f5f5;
}

.datepicker thead tr:nth-child(2) * {
  transition: $transition-duration;
}

.datepicker .datepicker-switch,
.datepicker .next,
.datepicker .prev,
.datepicker tfoot tr th {
  cursor: pointer;
}

.datepicker .datepicker-switch {
  width: 145px;
}

.table-condensed > tbody > tr > td,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > td,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > thead > tr > th {
  padding: 7px 10px;
  font-size: 17px;
  border-radius: 0;
}

.table-condensed th {
  color: $colored-red;
  font-family: 'Proxima Nova', sans-serif;
  font-weight: 800;
  border-bottom: 1px solid #f0f2f3;
  text-align: center;
  text-transform: uppercase;
}

.datepicker-dropdown {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0px 50px 40px -20px rgba(19, 29, 51, 0.11) !important;
  background-color: #fff;
  border: none;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
}

.datepicker td,
.datepicker th {
  height: 20px;
  border: none;
}

td.day {
  color: $form-value-color !important;
  font-weight: 700 !important;
}

td.day.old {
  color: $form-input-color !important;
  font-weight: 700 !important;
}

td.new.day {
  color: $form-label-color !important;
  font-weight: 700 !important;
}

td.day.active,
.month.focused,
.year.focused {
  background: $colored-red !important;
  color: #fff !important;
}
.today.day {
  background: #f0f0f0 !important;
}

.mont.active {
  background: #f0f0f0 !important;
}

td.day {
  text-align: center;
  cursor: pointer;
}

.datepicker table tr td.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active:hover {
  text-shadow: none !important;
}

在我们的old work中也可以正常工作。

Answer 1

似乎在我的手机上没问题，https://imgur.com/a/YOUcVcp。您是否尝试过使用其他设备访问您的网站？也许您的手机浏览器无法正确加载CSS。

如果您使用的是Bootstrap 4，则可以在以下链接上进行引用：Bootstrap 4 - Responsive Grid或在此Datepicker Bootstrap 4 website上进行引用