在 Google 协作平台中使用响应式设计 [英] Using responsive design within Google Sites

问题描述

有没有办法在 Google 协作平台中使用响应式设计原则.有没有人试过.你能指引我到一个示例站点吗?我查看了 这个 google 帮助主题，但据说这是专门针对移动网站的.

Is there a way to use responsive design principles with Google Sites. Has anyone tried that. Could you direct me to a sample site. I looked at this google help topic but then that is supposedly about exclusively mobile sites.

我的主要关注点是针对网络进行优化的普通网站，而不是主要针对移动网站.

My main focus is a normal website which is optimized for web rather than primarily a mobile site.

在这种情况下，Blogger 是一个更好的选择，因为它允许更改 CSS.

Alternatively would Blogger be a better option in this case as that allows to change CSS.

推荐答案

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

I think your negative impression is right. It doesn't implement the features you'd expect in responsive design.

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

The key to your question is that Google Sites don't use a viewport declaration (meta viewport in the head element). If you don't have that, then device browsers treat you as a legacy desktop-only website. They assume you'll break completely below ~830px, and set a page min-width accordingly. That doesn't sound much like responsive design to me.

Google 协作平台不允许您编写自己的 CSS 或 HTML HEAD，因此您无法自己实施响应速度更快的设计.

Google Sites don't let you write your own CSS or HTML HEAD, so you can't implement a more responsive design yourself.

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

To be fair, you can choose to not set a fixed page width. Also navigations buttons will reflow on relatively narrow windows, if you're using the "horizontal navigation" feature. The latter isn't great design but at least it's degrading gracefully.

在管理站点"->常规"下有一个选项自动将站点调整为手机".但是很多人建议最好不要使用它:).我尝试在 旧网站 上启用它，预览页面，然后选择在移动设备中预览".至少在我原来的上网本(800px 宽度)上的 Firefox 上，它没有响应.它没有扩展以正确使用 800 像素屏幕.

There is an option "Automatically adjust site to mobile phones" under Manage site -> General. However many people suggest it's better not to use it :). I tried enabling it on an old site, previewing the page, and selecting "preview in mobile". At least on Firefox on my original netbook (800px width), it was not responsive. It didn't expand to use the 800px screen properly.

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

As an aside, the line-wrapping (or absence of it) is a pre-existing issue with my site. You could blame this on me for not testing it :). However it illustrates a limitation of the WYSIWYG editor in Google Sites. It doesn't show, check for, or filter out the formatting that causes this problem.

这篇关于在 Google 协作平台中使用响应式设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！