Google Drive Picker (JavaScript) 不适合移动设备/响应式

Posted 2023-05-06

【中文标题】Google Drive Picker (JavaScript) 不适合移动设备/响应式

【英文标题】：Google Drive Picker (JavaScript) not mobile friendly / responsive

【发布时间】：2015-11-02 06:54:18

【问题描述】：

15 年 11 月 - 仍在寻找解决方案。

我正在使用 Google Picker API https://developers.google.com/picker/docs/#hiworld（显然！）让用户从他们的云端硬盘帐户中选择一个文件（选择一个文件从云端硬盘下载 - 不是将新文件上传到云端硬盘）。这是在响应式网站上，而不是“应用程序”（本机或其他）。

它在台式机和平板电脑上运行良好，但在手机上，选择器太大了。

https://developers.google.com/picker/docs/reference#Picker 中写道：

PickerBuilder.setSize() 设置首选对话框大小。对话框将自动居中。它的最小尺寸为 (566,350)，最大尺寸为 (1051,650)。

所以它似乎不是为在手机上工作而设计的？我错过了什么，还是有解决方法或替代方法？当 Dropbox 等其他服务直接开箱即用时，Google 将电话用户排除在使用 Picker 之外，这似乎很奇怪。

【问题讨论】：

你最好自己写。

谢谢@pinoyyid - 你是说你确定没有移动解决方案吗？而且，如果不射击 Messenger，你为什么 Google 会选择不支持手机？

经验告诉我要尽可能少地依赖不提供支持合同的封闭源代码库。你是开发者的心血来潮，在这种情况下是谷歌，他们的优先级很少与你或我的相同。选择器是一个复杂的库，因为它试图处理许多不同的用例（例如，从 GDrive 中选择以及从本地驱动器中选择）。您可能会发现您的用例相对简单，并且可以相当容易地手动构建。我看到你已经在这里尝试过groups.google.com/forum/#!forum/google-picker-api ;-(

有商业选项可以解决您的问题并支持其他云存储。 filepicker.com

虽然这个问题似乎已经过时，因为 v3 API 可以调用 android 系统选择器，但事实并非如此。系统选择器输出一个 content: URI 而不是 Drive API 的其余部分使用的 fileId，并且似乎没有办法检索文件夹路径而不仅仅是简单的名称。它也没有提供足够的权限来创建用户刚刚选择的文件的共享链接，因此我的应用必须要求对您的整个云端硬盘 (https://www.googleapis.com/auth/drive) 进行读/写访问才能做到这一点！

【参考方案1】：

我有一个类似的问题，并设法通过使用这个 css 解决它：

@media screen and (max-width: 991px) 
 .picker.modal-dialog 
    max-width: 355px !important;
 
 .picker.modal-dialog-content.picker-dialog-content
     max-width: 355px !important;
 

您应该能够调整宽度和媒体查询以满足您的需求，或者进行更多媒体查询以使其在其他设备上看起来更好。

我还将 JS 中的选项设置为最小 PickerBuilder.setSize(566,350)。

【讨论】：

请不要在多个问题上发布相同的答案。

谢谢马克，我在我的主站点 CSS 文件上试过了，但没有改变。你把那门课放在哪里了？

对不起，自从我这样做以来已经有一段时间了，现在我的记忆有点模糊了。查看 css 只是在 head 标签中所需的样式表中。如果我没记错的话，标记中的类是由 Google Picker 本身生成的。但是，我在此 gist.github.com/Daniel15/5994054 上对选择器进行了基础集成 - 所以可能会让您的选择有所不同。如果您还有任何问题，请告诉我。

我刚刚注意到这实际上已经停止了我们的设置。我猜谷歌已经以某种方式改变了它。我设法做了一个快速修复，虽然有点hacky让它工作。我不确定为什么这对旧的有效，但它对我有用。我刚刚在上面的选择器模式加载的正文中添加了这个样式标签。 我对这个解决方案不满意。如果我想到其他事情，我会告诉你的。