Google Drive Picker (JavaScript) 不适合移动设备/响应式 [英] Google Drive Picker (JavaScript) not mobile friendly / responsive

问题描述

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

Nov '15 - still looking for a solution.

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

I'm using the Google Picker API https://developers.google.com/picker/docs/#hiworld to (obviously!) have the user pick a file from their Drive account (select a file for downloading from Drive - not to upload a new file to Drive). This is on a responsive website, not an "app" (native or otherwise).

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

It works fine on a desktop and tablet, but on a phone the Picker is just too big.

在 https://developers.google.com/picker/docs/reference#Picker 中说:

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

PickerBuilder.setSize() Set the preferred dialog size. The dialog will be auto-centered. It has a minimum size of (566,350) and a maximum size of (1051,650).

所以它似乎不是为手机设计的?我是否遗漏了什么，或者是否有解决方法或替代方法?当 Dropbox 等其他服务直接开箱即用时，Google 将电话用户排除在使用 Picker 之外，这似乎很奇怪.

So it seems it is not designed to work on a phone? Am I missing something, or is there a workaround, or an alternative? It seems very odd that Google would exclude phone users from using the Picker when other services like Dropbox work straight out of the box.

推荐答案

我遇到了类似的问题，并通过使用这个 css 设法解决了它:

I had a similar problem and managed to solve it by using this 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;
 }
}

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

You should be able to adjust the width and media query to suit your needs or do more media quires to make it look nicer in other devices.

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

I also set the option in the JS to the minimum PickerBuilder.setSize(566,350).

这篇关于Google Drive Picker (JavaScript) 不适合移动设备/响应式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！