django - 在移动设备上回退到 html5 输入小部件并在桌面上使用小部件库的最佳方式是什么？

Question

我有一个用 Django 编写的应用程序，我的前端使用 AngularJS。

我正在使应用程序响应；但我有一些在移动屏幕上播放效果不佳的输入小部件（例如：datepicker、numberpicker 等）。我想在移动浏览器上禁用这些小部件，但我不知道最好的方法。

例如，bootstrap datepicker 用作可嵌入组件（作为 a div），但要将其转换为 html5 输入，我必须将其替换为 ainput type="text"并且不初始化 datepicker。

我应该在我的 datepicker 指令或 django 模板中进行此更改，返回 div 或基于浏览器的输入吗？

score 0 · Accepted Answer

我会更改模板以使用标准 html 元素，例如<input type="date">，然后使用 javascript 来检测设备尺寸并仅替换桌面尺寸上的代码（直到大约 767px）。

我对这个过程的建议是（通常）桌面浏览器在实时处理和应对 DOM 转换方面更强大、更快。如果这种情况发生在移动设备中，它会更慢或更容易出现错误/错误。在台式机上，这些 DOM 变化几乎是难以察觉的。

作为使用较少 javascript 的替代方案，您可以使用标准和非标准对来加倍所有元素。.mobile然后，在标准类和其他类中添加一个类.desktop。最后，在 css 样式上，使用：

.mobile {display: none;} //all styles

@media only screen and (max-width: 767px) {
    .mobile {display: block;}
    .desktop {display: none;}
}

我还认为这个问题是一个很好的例子，说明标准 html 如何变得对其他设备更具可扩展性。

希望能帮助到你。

1 回答 1