应用错误收集

时间：2015-07-08 14:55:54

标签： css iframe responsive-design widget google-translate

在我的网站上，我正在使用“Google翻译我的网页”小部件：https://translate.google.com/manager/website/

Widget工作得很好，但在较小的屏幕上存在问题。 iframe窗口未正确调整大小，因此右侧的语言被截断。

你可以在这里看到：

enter image description here

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

感谢您的帮助！

答案 0 :(得分：2)

有几种可能的解决方案：

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

答案 1 :(得分：1)

或者，你可以尝试删除iFrame的高度和宽度属性，在iFrame周围添加一个带框架的容器，然后再用CSS编写代码以使iFrame再次响应，所有这些都在“响应”中详细描述IFrames - 正确的方式！“article。