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

Question

是否有办法将响应式设计原则与Google Sites结合使用。有没人试过呢。你能指导我到一个示例网站吗？我看了this google help topic，但那时据说只是移动网站。

我主要关注的是一个针对网络而非主要针对移动网站进行优化的普通网站。

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

Answer 1

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

您的问题的关键是Google协作平台不使用视口声明（head元素中的元视口）。如果您没有，那么设备浏览器会将您视为仅限旧版桌面的网站。他们假设你将完全打破~830px以下，并相应地设置页面最小宽度。这听起来不像是我的响应式设计。

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

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

管理网站下有一个选项“自动调整网站到手机” - ＆gt;一般。然而，许多人建议最好不要使用它:)。我尝试在old site上启用它，预览页面，然后选择“在移动设备中预览”。至少在我的原始上网本（800px宽度）的Firefox上，它没有响应。它没有扩展到正确使用800px屏幕。

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

Answer 2

移动是，响应号码

我今天搞乱谷歌网站，你可以让网站移动友好（我必须来这里开始！）。我只是用“空白模板”搞砸了。

你需要激活（就像其他人提到的那样）：

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

考虑到2015年春季谷歌实施的整个移动“推送”，默认情况下，对于任何新创建的Google网站都应该启用。

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

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

我猜基本主题实际上叫做“滑雪”。我尝试了“Legal Pad”主题，它完全被移动设备所取代。 我认为由于标题和内容区域背景图像。

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

此外，您可以添加的HTML格式非常有限。尝试保存时，尝试添加脚本标记会被删除。因此，根据使用情况，还有其他选择。

Answer 3

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

Answer 4

现在可以制作响应式Google网站。因为谷歌已经增强了这项功能，并且＃34;自动将网站调整为移动电话＆＃34; “管理站点”选项按钮中的选项。

找到选项 - 转到＆gt;管理网站＆gt;一般＆GT; ，在常规设置页面的下半部分，您可以看到一个名为＆＃34;自动调整网站到手机的单选按钮＆＃34;。只需勾选单选按钮＆amp;你已经增强了这个功能。

参考使用自适应响应的Google网站 www.jyotiprokashmusic.com

制作的示例网站