手機網站101

Question

關於創建我的第一個移動網站，我不知道從哪裏開始。這是一個簡單的html/css網站，所以我希望我能夠快速拼湊起來。

我怎麼知道哪個樣式表來使用基於訪問者是否是移動還是不是瀏覽器？

我習慣用我的文本編輯器和螢火蟲來建立基本網站。我是否需要其他工具？

我要去雖然用我的直覺和創建移動網站，尺寸是流體，或許與固定的字體大小。

是否有指導或某些指標有人可以把我的方式嗎？有什麼我需要特別注意的嗎？清單？我試圖儘可能保持簡單。

Whats mobile site ABC？

Answer 1

在一個理想的世界，你會告訴手機瀏覽器通過定義一個「手持式」媒體樣式表使用移動樣式表，如下所示：

<link rel="stylesheet" href="handheld.css" media="handheld"/> 

不幸的是，這會不會對許多移動工作瀏覽器。爲什麼？提供瀏覽器手機的手機供應商不希望被視爲提供「貧民窟」移動互聯網 - 只有桌面內容才能滿足需求。這意味着大多數製造商構建瀏覽器來故意忽略媒體類型。

相反，你將不得不成爲基於用戶代理嗅探樣式表（或重定向與移動UA字符串用戶移動子域）。您必須在服務器級別執行此操作。

至於建設和調試 - 有手機模擬器在那裏，但他們的行爲是不完整，並且有大量的設備，在那裏。你可能不得不爲僅僅測試一些常見平臺而試圖設計圍繞最低公分母進行設計。這意味着假設設備可能不夠聰明，無法下載在無關CSS中指定的圖像（所以不要試圖用CSS媒體查詢來排除大圖像），或者設備可能無法執行JavaScript（大多數設備都具有較差的JS處理能力） 。

哦，還有一件事：如果你要使用JavaScript，嘗試以僞命名空間包裹你的方法。許多移動提供商攔截Web請求並插入他們自己的JS來替換需要大量帶寬的圖像和其他元素。通常，這些方法使用通用名稱，比如'main'等等，並且由於缺少名稱空間，會與作者定義的方法衝突。

除此之外，看看這篇文章（http://www.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/），祝你好運！

Answer 2

您可以使用@ media-queries構建網站，這樣您可以根據屏幕尺寸等目標設置不同的設備。您可以使用@ media-queries查看http://mediaqueri.es的網站示例。我發現用於測試網站的優秀網站是http://www.responsinator.com/，因爲您仍然可以在Chrome，Safari或Firefox中使用開發人員工具。

如果您決定走此路線，請查看Ethan Marcotte的書Responsive Web Design http://www.abookapart.com/products/responsive-web-design。

Answer 3

您可以使用元標記[code] viewport [/ code]根據屏幕寬度更改CSS表單。