在Google协作平台中使用响应式设计

Question

有没有一种方法可以使用响应式设计原则与Google Sites。有没有人尝试过。你能指导我到一个样本网站吗？我看了this google help topic，但后来认为这只是移动网站。

我主要关注的是一个正常的网站，它针对网站进行了优化，而不是主要针对移动网站。

另外，在这种情况下，Blogger会是更好的选择，因为它允许更改CSS。

Answer 1

我认为你的负面印象是正确的。它没有实现您在响应式设计中期望的功能。

您的问题的关键在于Google协作平台不使用视口声明（头元素中的元视口）。如果你没有这个功能，那么设备浏览器会将你视为一个传统的桌面专用网站。他们假设你会在〜830px以下完全破解，并相应地设置页面最小宽度。这听起来不像是响应式设计。

Google协作网不允许您编写自己的CSS或HTML HEAD，因此您无法亲自实施更具响应性的设计。

公平地说，您可以选择不设置固定页面宽度。如果您使用“水平导航”功能，导航按钮将在相对较窄的窗口上重新排列。后者不是伟大的设计，但至少它是优雅的退化。

在管理站点 - >常规下有一个选项“自动调整站点到手机”。然而很多人认为最好不要使用它:)。我试着在old site上启用它，预览页面，然后选择“在移动设备上预览”。至少在我的原始上网本（800像素宽）的Firefox上，它没有响应。它没有扩展到正确使用800像素的屏幕。

顺便说一下，换行（或不存在）是我的网站预先存在的问题。你可以责怪我没有测试它:)。但它说明了Google协作平台中所见即所得编辑器的局限性。它不会显示，检查或过滤导致此问题的格式。

Answer 2

现在是一个天其可能做出响应谷歌网站。因为Google在“管理站点”选项按钮中增强了此功能“自动调整站点到手机”选项。

找到选项 - 转到>管理站点>常规>，在常规设置页面的下半部分，您可以看到一个名为“自动调整网站到手机”的单选按钮。只需勾选您已增强功能的单选按钮&。

参考与回应谷歌网站www.jyotiprokashmusic.com

Answer 3

移动是，响应没有做出了表率网站。

我今天搞乱了Google协作平台，你可以让网站移动友好（我不得不来这里开始！）。我只是用“空白模板”来搞乱。

你需要激活（如已提到的其他人）：

选项（齿轮图标）>管理站点>（向下滚动到移动）检查..自动调整手机。是的，让我们把这个选项埋在底部吧！

考虑到2015年春季Google实施的整个移动“推送”功能，对于任何新创建的Google网站，默认情况下这应该为ON。

只需选择该选项即可生成OK（基本）移动网站。不是响应网站。所以在我的iPhone上，它可以正确缩放照片以适应设备，并将主菜单切换到“汉堡包”图标/菜单。但是折叠桌面浏览器窗口不会产生响应式结果。 https://sites.google.com/site/rwstws51/

作为一项测试，我上传了一张太大的照片（2.5mb），看看会发生什么。通过Google PageSpeed Insights运行该网站并未显示任何“优化照片”警告，因此似乎为手机和台式机提供了优化的照片。

我猜基本主题实际上叫做“滑雪”。我尝试了“Legal Pad”主题，并且完全使用移动设备。 我觉得由于标题和内容区域的背景图片。

对我而言，如果您已经沉浸在Google的其他产品中，那么Google协作平台非常理想......驱动器，文档，Google +，网络媒体工具，分析等等......因为它具有在编辑时添加这些类型的项目的链接。或者需要一个快速协作网站，因为您可以轻松设置YouTube，Drive项目等网站访问权限。

此外，你可以添加什么html非常有限。尝试添加脚本标签时尝试保存将被删除。所以再次根据使用情况，肯定有其他选择。

Answer 4

如果您使用apps脚本创建自己的自定义HTML表单，则可以将@media视口等添加到这些页面/表单的css中，这样可以帮助... ，但Google网站框架仍然很好。 ...不是那么好........