两个Google Translator小部件，用于响应式布局 [英] Two Google Translator Widget for Responsive Layout

问题描述

我最近在网页中添加了一个GoogleTranslator小部件时遇到了一个问题.我进行了一些研究，显然Google不允许模板中使用多个GoogleTranslator小部件.

I recently faced an issue for adding one more GoogleTranslator widget in my web page. I did some research apparently Google won't allow more than one GoogleTranslator widget in template.

有人遇到过同样的问题吗?有什么解决办法吗?在响应式设计中，我需要复制一些块并以不同的顺序使用它们.

Does anyone have experienced the same issue? Is there any solution? In responsive Design I need to duplicate some blocks and use them in different orders.

推荐答案

创建两个容器div-一个用于常规"布局，一个用于移动"布局(或更多，取决于您的工作).让窗口小部件从常规"布局的容器内开始.添加一些JavaScript来监听窗口的宽度.如果它在某个断点(小于或等于768px，小于或等于480px等)之下，请将小部件移至另一个容器div.

Create two container divs - one for your "normal" layout, one for your "mobile" layout (or more, depending on what you're doing). Have the widget start out inside of the "normal" layout's container. Add some JavaScript to listen to the width of the window. If it's under a certain break point (768px or less, 480px or less, etc.), move the widget to the other container div.

我已经为我完成了这项工作-但是小部件本身没有响应，因此您必须处理一新版视口中不适合的语言.

I've had this work for me - however the widget itself isn't responsive, so you'll have to deal with a new issue of the languages not fitting in the viewport.

希望有帮助.

这篇关于两个Google Translator小部件，用于响应式布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！