你可能已經看到了iPhone如何翻頁和展開網頁。 它可以一目了然地顯示整個網頁，或放大以使您感興趣的文本可讀。 從某種意義上說，由於iPhone使用Safari，因此網頁設計師不必做任何特殊的事情即可創建可在iPhone上使用的網頁。
但是，你真的想讓你的頁面正常工作嗎？ 大多數設計師希望他們的頁面閃耀！
當你建立一個網頁時 ，你需要考慮誰會查看它，以及他們將如何查看它。 某些最佳網站會考慮正在瀏覽網頁的設備類型，包括分辨率，顏色選項和可用功能。 他們不僅僅依靠設備來解決問題。
為移動設備構建網站的一般準則
- 在盡可能多的設備上進行測試。 你應該做的第一件事是在iPhone上以及盡可能多的移動設備或模擬器上查看你的網站。 雖然您可以在所有測試中使用仿真器，但它們確實不會給您帶來與嘗試在小屏幕上瀏覽網站相同的感覺，因此盡可能在實際設備上進行測試。
- 讓你的頁面優雅地退化。 您可以為支持Flash的寬屏幕瀏覽器編寫頁面，但要確保即使在無法處理任何特殊功能（如Cookie，Ajax，Flash，JavaScript等）的小型監視器中也能看到關鍵信息。 超越XHTML Basic的任何東西都將超越一些手機。 雖然大多數智能手機可以處理所有這些事情（當然除了iPhone上的Flash），但其他移動設備無法處理這些事情。
- 建立一個無線特定頁面，並使其易於查找。 如果你打算為你的手機和無線客戶建立一個特定的頁面 - 使它可用。 一種好的方法是將無線頁面的鏈接放在文檔的頂部，然後使用手持媒體類型將該鏈接隱藏在非手持設備上。 畢竟，大多數人甚至在手機上都會訪問您的主頁 - 如果您的無線頁面的鏈接不存在，那麼如果頁面太難使用，他們將離開。
智能手機的網頁佈局
在為智能手機市場編寫頁面時，您應該記住的第一件事是，如果您不想做任何更改，則不必做任何更改。 大多數智能手機可用的好處是，他們使用Webkit瀏覽器（iOS上的Safari和Android上的Chrome）來顯示網頁，所以如果您的網頁在Safari或Chrome中看起來不錯，在大多數智能手機上它看起來都不錯（只是更小一些）。 但有些事情可以使瀏覽體驗更加愉快：
- 請記住，屏幕很小。 智能手機會將所有這些列壓縮到微小的窗口中，這可能會使他們很難閱讀而不進行縮放。 大多數用戶習慣於縮放，但可能會讓人感到厭煩。 一列長文本更易於閱讀。
- 將頁面分成更小的塊。 閱讀手機上的長段文字可能很困難，因此將它們放在多個頁面上可以使它們更易於閱讀。
iPhone上的鏈接和導航
- 網址越短越好。 如果你曾經嘗試在手機上輸入網址，你會知道這很痛苦（除了那些習慣發送大量短信的青少年）。 即使在iPhone上，輸入長URL也很繁瑣。 保持簡短。
- 但長鏈接文本更容易點擊。 當一個頁面上有幾個單獨的詞鏈接到不同的文章時，所有這些文字都緊挨著一個，因此可能很難在沒有縮放的情況下點擊正確的文章。 很多人會放棄並去別的地方。 鏈接3-5個單詞比單字鏈接更容易點擊手機。
- 不要將導航放在屏幕的最上方。 沒有什麼比討論頁面和鏈接屏幕尋找你想要的信息更煩人的了。 如果您已經查看了專為手機設計的網頁，您會發現首先出現的內容是標題和內容。 然後，在下面是導航。
- 不要害怕隱藏你的導航。 隱藏CSS或JavaScript的導航鏈接，並使其僅在用戶要求時才顯示，這是讓智能手機用戶更輕鬆地使用頁面的一種方式。
智能手機上的圖像提示
- 圖像必須很小。 是的，Android和iPhone可以放大和縮小圖像 ，但尺寸和下載時間越短，無線客戶就越開心。 優化圖像總是一個好主意，但對於手機頁面來說，這是至關重要的。
- 圖像必須快速下載。 當您從移動設備查看圖像時，圖像在網頁上佔用大量空間。 雖然它們通常非常漂亮，並且在全屏瀏覽器中查看時頁面看起來更好，但它們通常會妨礙移動設備。 另外，當智能手機用戶使用蜂窩網絡時，他們想要支付的最後一件事是下載一大堆圖像或導航圖標。
- 不要在頁面頂部放置大圖片。 就像導航一樣，等待一個需要3-4個屏幕的圖像加載到頁面的頂部可能非常繁瑣。 這在網頁上非常普遍。 唯一的例外是，如果讀者知道他們點擊時會得到一張圖片，在照片庫中說。
設計移動設備時要避免什麼
在構建適合移動設備的頁面時，您應該避免幾件事情。 如上所述，如果您確實希望在網頁上顯示這些內容，您可以，但確保該網站在沒有它們的情況下運行。
- Flash - 大多數手機不支持Flash，因此將其包含在無線網頁中並不是一個好主意。
- 餅乾 - 許多手機沒有Cookie支持。 iPhone支持cookie。
- 幀 - 即使瀏覽器支持它們，也要考慮屏幕的尺寸。 框架在移動設備上不起作用 - 它們很難或不可能讀取。
- 表格 - 不要在移動頁面上使用表格進行佈局。 並儘量避免一般的表格。 每個手機都不支持它們（儘管iPhone和其他智能手機支持它們），最終會出現奇怪的結果。
- 嵌套表格 - 如果您必須使用表格，請務必不要將它嵌套在另一個表格中。 桌面瀏覽器很難支持這些功能，並且充其量也會讓頁面加載速度更慢。
- 絕對尺寸 - 換句話說，不是以絕對尺寸（像素，毫米或英寸）來定義對象的尺寸。 如果將某些東西定義為100px寬，則在一個可能是屏幕一半的移動設備上，另一個可能是寬度的兩倍。 相對大小（如EMS和百分比）效果最好。
- 字體 - 不要認為你習慣使用的任何字體都可以在手機上使用。
閱讀更多
- 如何使您的網站移動友好使用PHP