為移動環境而調整一個網站是巨大的挑戰。許多在網頁設計上的技巧及感官效果將無法在行動裝置上完好呈現，反之亦然。
行動裝置是以不同的限制來嘗試新事物的好地方。人們訪問移動網頁通常不像在電腦螢幕前那樣有耐心——手持功能的螢幕要小得多，而且移動網路的串連（通常是3G網路）仍然不夠快。
●設計上的調整
導航
因為螢幕大小的限制，原本無所不在的菜單將無法被完全應用。如果為每個頁面都直接應用上相同的菜單，訪問者就必須做滾動操作，翻掉菜單才能看到內容。這會讓人非常不適。所以只有當你的網站在頂部導航中有少量菜單連結時才考慮把它們放置到每個頁面中。為此，它還得是橫向水平的。 解決方案是，把導航放置到第一個頁面，而在其他頁面中儘可能的使用一個連結連向第一個頁面，或者使用麵包屑式的導航。
內容
你的內容應該是擁有最高優先順序的。螢幕很小，所以使用較少的圖片及留白，讓你的設計儘可能的簡潔。移動網路的連線速度還無法快到處理大量圖片，這些圖片還會增加主要內容聚焦閱讀的難度。
連結
在行動裝置上任何東西都會變小，連結也不例外。你得讓它們更容易被使用者點到。要做到這點，可以在它們周圍多留些空間並把字型調大些。當連結被選中時，要能有相應的反饋，比如改變字型顏色、增加底線、改變背景色等等，即使這個連結是附在圖片上的。使用者會很樂意看到當他們點選連結時發生的變化。
各式的螢幕尺寸
各款手機均有不同的螢幕尺寸，僅iPhone就有兩種：垂直和水平。所以，你的網站不該用像素值來固定寬度，用百分比和EMS會更好。這個方法能讓你的網站適應各種螢幕尺寸。另外，你也可以通過設定META關於行動裝置的屬性值來限制介面的縮放和尺寸大小。
| 補充關於meta對行動裝置控制的舉例: <%@page contentType="text/html;charset=UTF-8"%> 其中： |
跨平台
別指望你的網站能在所有的行動裝置瀏覽器上都有相同的表現，那得做很多的事。一些瀏覽器不支援或不完全支援某些HTML元素和CSS屬性，頭部標識也是各式各樣。不過如果你只是希望頁面在iPhone和android上有良好表現，就不必在原本針對案頭瀏覽器的代碼上太費周折的做修改了，你需要做的就是按之前說的幾個要點作調整。要在行動裝置上對代碼多做測試。一些頁面在設計未必很好，但是它們的代碼是有效，你可以參考它們。●經典案例
下面是一些非常棒的行動裝置網頁設計，你會發現這些是非常有用的案例展示，移動互聯真的很精彩。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
