2013-02-20 141 views
0

希望有人可能知道我的意思,並在哪裏可以找到這樣的事情。網站的移動瀏覽器

我正在創建一個新網站,作爲其中的一部分,我將提供移動網頁設計。如果可能的話,我需要的是,如果用戶點擊我的一個示例,它會加載一個移動瀏覽器(而不是正常的Web瀏覽器上的移動網站)。更像是一個模擬器,可以讓他們看到潛在網站的實例。

有沒有什麼會做到這一點,或者我正在打開一個新的窗口設置大小,並顯示其中的網站?

請注意---雖然寫這個,我可能已經偶然發現一個潛在的底線,因爲這可能會暴露代碼。

我想我應該考慮把JPEG或PNG,他們可以滾動瀏覽,以便暴露移動網站本身背後的代碼?!

如果有這樣的模擬器或可用的喜歡(並沒有在後臺顯示代碼),我會很樂意指出正確的方向!

感謝 保羅

+0

你到目前爲止嘗試過什麼。我會認爲谷歌的「移動網站模擬器」會給你幾個開始的地方。僅供參考不要在移動網站上使用圖像,它們會對數據造成很大影響,並會使移動網站(在移動連接上)非常緩慢,而且它的搜索引擎非常差。 – 2013-02-20 23:48:45

回答

0

請糾正我,如果我誤解了你的問題,但它聽起來像是你需要讓用戶預覽在不同的屏幕尺寸一響應式設計,同時拒絕他們訪問源代碼。

如果出現這種情況,將設計渲染爲平面圖像文件以進行預覽是最佳選擇,儘管它會犧牲設計的任何交互方面。這是一個粗略的折衷。

我假設你有隱藏代碼的合法理由。但是,如果還沒有,你可能會想問問自己,首先激發你隱瞞源代碼的是什麼。該網站建立在開​​放標準和可訪問性上;您必須經歷許多扭曲才能從瀏覽器中隱藏HTML,CSS和JavaScript等靜態資源。我明白,如果您擔心粗略的客戶在沒有付款的情況下使用您的工作,但這更多的是合同/法律問題而不是技術問題。也就是說,您可以隨時將移動網站的主要內容(或者如果您必須隱藏代碼的內容的圖像)放置在指定寬度和高度的div內,以便可視化模擬手機。用一些手機圖形包裝它,用overflow-y: scroll;overflow-x: hidden;控制溢出,然後你就擁有它了。

Web Design Weekly是這個概念在行動中的一個很好的例子。

編輯:它發生在我身上,你可以探索的另一種選擇是視頻而不是靜態圖像。總是一個選項,如果你需要哇客戶。 Typeform.com就是我正在談論的一個很好的例子。

+0

感謝諾亞C,我想我會選擇Typeform選項,因爲它看起來非常好,是一個更好的選擇! – 2013-02-25 19:35:41