Google翻译下拉窗口不会在较小的屏幕上重新调整大小

问题描述 投票:3回答:2

在我的网站上,我正在使用“谷歌翻译我的页面”小部件:https://translate.google.com/manager/website/

小部件工作得很好,但在较小的屏幕上有一个问题。 iframe窗口未正确调整大小,因此右侧的语言被截断。

你可以在这里看到它:

当我查看代码时,在几个级别中有固定的div高度和宽度,因此更改所有内容并不是那么容易,特别是因为它是在iframe中加载的。

感谢帮助!

css iframe responsive-design widget google-translate
2个回答
2
投票

有几种可能的解决方案:

  1. 看起来您选择了“内联|仅下拉”窗口小部件类型。尝试“内联|水平”或“内联|垂直”。截至今天,它呈现为标准选择标记,应该适用于移动屏幕。
  2. 您可以让单个小部件从一个面板跳到另一个面板,具体取决于您的布局here
  3. 您可以创建两个具有不同样式的小部件(桌面下拉,移动垂直/水平)。但是,如果您尝试使用它们来翻译页面,这可能会导致问题。
  4. 如果您确实需要使用下拉列表,则必须使用脚本,因为下拉内容是一个框架,如上面的注释中所述。您需要做两件事:a)使iframe宽度适合您当前的屏幕宽度; b)将overflow:auto应用于iframe内的<body>标签以启用下拉滚动。

1
投票

或者,您可以尝试删除iFrame的高度和宽度属性,添加带有围绕iFrame的框架的容器,以及CSS中的其他代码以使iFrame再次响应,所有这些都在“响应式IFrame中 - 更多详细信息”中进行了描述正确的方式!“article

© www.soinside.com 2019 - 2024. All rights reserved.