在 Web 和移动设备上调试对比 Css 样式

Posted 2023-02-25

【中文标题】在 Web 和移动设备上调试对比 Css 样式

【英文标题】：Debugging Contrasting Css Styling on Web and Mobile [duplicate]

【发布时间】：2018-03-05 21:23:12

【问题描述】：

所以我有this website:

当我点击 Pickup Date & Time 时，会出现一个引导日期选择器。

这在 Windows/Mac 上运行良好，但日期选择器会为移动组件呈现屏幕外。

这一切都被大量嵌入到插件中，因此很难给出代码示例。

通常，如果我在网络上遇到这个问题，我会在 Chrome 开发工具中玩转并更改样式，直到它正常工作为止。

但是，由于此错误发生在移动设备上，我不知道如何在尽可能快的时间内进行调试。

您可以推荐哪些工具来检查移动设备上的样式？

你会采用什么方法来调试这样的场景？

【问题讨论】：

尽管如此，考虑到只有 CSS 会给您带来问题，因此只需使用较小的窗口即可获得安全效果。如果需要，您可以使用 F12 的“响应式”模式来指定所需的确切宽度，甚至可以从常用宽度列表中进行选择。

【参考方案1】：

Chrome 和 safari 都提供了出色的移动调试工具！只要您有移动设备或模拟器，您就可以将设备连接到您的计算机并使用桌面浏览器的开发工具来检查移动浏览器的代码：

Safari：https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html

通过 USB 将手机插入计算机。

在您的手机上：设置 > Safari > 高级 > 激活网络检查器

在您的桌面上：开发者 > [选择您的手机]

对于 Chrome，有类似的第三方库形式：http://people.apache.org/~pmuellr/weinre/docs/latest/