在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網站框架仍然很好。 ...不是那麼好........