移動端網站建設需要特別注意的一些準則

2022-05-20 分類：網站建設

你很有可能已經看到了智能手機是如何展示網站的。它可以一目了然地向您顯示整個網頁，或者放大以使您感興趣的文本具有可讀性。從某種意義上說，由于iPhone使用Safari，網頁設計人員不應該做任何特別的事情來創建一個可以在iPhone上運行的網頁。但是，你真的希望你的頁面只是工作-還是脫穎而出？當你建立一個網頁，你需要考慮誰將會看到它，以及他們將如何查看它。一些最好的站點會考慮頁面所使用的設備類型，包括分辨率、顏色選項和可用的功能。移動端網站建設需要特別注意的一些準則，因為他們不能僅僅依靠設備來解決問題。

建立移動設備站點的一般準則

盡可能多地測試設備。您應該做的第一件事是在iPhone和盡可能多的不同移動設備或模擬器上查看您的站點。雖然您可以在所有測試中使用模擬器，但它們給人的感覺與在小屏幕上瀏覽網站時的感覺不同。您應該盡可能多地在實際設備上進行測試。

使您的頁面優雅地降級。您可以為啟用Flash的寬屏瀏覽器編寫頁面，但請確保關鍵信息即使在無法處理任何特殊功能(如cookie、Ajax、Flash、JavaScript等)的微型顯示器中也可見。任何超越XHTML Basic的東西都將超越一些手機。雖然大多數智能手機可以處理所有這些事情，但其他移動設備不能。

構建特定于無線的頁面，并使其易于查找。如果你想為你的手機和無線用戶建立一個特定的頁面-讓它可用。一種很好的方法是將鏈接放在文檔頂部的無線頁面上，然后使用手持媒體類型對非手持設備隱藏該鏈接。畢竟，大多數人都會訪問你的主頁，即使是在手機上-如果你的無線頁面鏈接不在那里，如果這個頁面太難使用，他們就會離開。

移動端網頁布局

在為智能手機市場撰寫頁面時，你應該記住的第一件事是，如果你不想做任何改變，你就不必做任何改變。大多數智能手機最棒的地方在于，它們使用Webkit瀏覽器(iOS上的Safari和Android上的Chrome)來顯示網頁，所以如果你的頁面在Safari或Chrome中看起來不錯，那么它在大多數智能手機上都會很好(只是小得多)。但是你可以做一些事情讓你的瀏覽體驗更愉快：

記住屏幕很小。智能手機會將所有這些列壓縮到小窗口中，這會使它們在不縮放的情況下很難閱讀。大多數用戶習慣于縮放，但它可能會讓人感到厭煩，一長列文本更容易閱讀。

將頁面分成更小的塊，在手機上閱讀很長的文本片段是很困難的，所以把它們放在多個頁面上會讓它們更容易閱讀。

iPhone上的鏈接和導航

URL越短越好。如果你曾經嘗試在手機上輸入URL，你就會知道這是一種痛苦(除了那些習慣于發送大量短信的青少年)。即使在iPhone上，輸入長URL也很乏味。把它們剪短。

但是長鏈接文本更容易點擊。當一個頁面上有幾個單獨的單詞鏈接到不同的文章時，如果沒有縮放，就很難點擊正確的單詞。很多人會放棄去別的地方。帶有3到5個單詞的鏈接比1個單詞的鏈接更容易在電話上單擊。

不要把你的導航放在屏幕的最上面。沒有什么比在屏幕和鏈接屏幕上翻頁來找到你想要的信息更煩人的了。如果你看過為手機設計的網頁，你會發現首先出現的是內容和標題。下面是導航。不要害怕隱藏你的導航。使用CSS或JavaScript隱藏導航鏈接，并僅在用戶要求時才顯示這些鏈接，這是使智能手機用戶更容易訪問頁面的一種方法。

智能手機網頁圖像提示

圖像必須很小。是的，Android和iPhone可以放大和縮小圖片，但無論是在尺寸上還是下載時間上，它們都越小，你的無線用戶就會越開心。優化圖片一直是個好主意，但對于手機頁面來說，這一點至關重要。

圖像必須快速下載。當您在移動設備上查看圖像時，這些圖像占用了網頁上的大量空間。而且，雖然它們通常非常漂亮，在全屏Web瀏覽器上查看時會使頁面看起來更好，但在移動設備上它們往往會妨礙頁面的瀏覽。此外，當智能手機用戶在手機網絡上時，他們最不愿意花錢的事情就是下載一堆巨大的圖片或導航圖標。

不要把大的圖片放在頁面的頂部。就像導航一樣，等待一個需要3到4個屏幕的圖片加載到頁面頂部是非常乏味的。這在網頁上是非常普遍的。唯一例外的是，如果讀者知道，當他們點擊時，他們將得到一張圖片，例如在圖片庫。

為移動設備設計時應避免的事項。在構建一個移動友好的頁面時，有幾件事是你應該避免的，這些基本原則是：

Flash：大多數移動電話不支持Flash，因此將其包含在無線頁面上并不是一個好主意。

Cookie：許多手機沒有Cookie支持。iPhone確實支持Cookie。

框架：即使瀏覽器支持框架，也要考慮屏幕的尺寸。框架不能在移動設備上工作-它們很難或不可能讀懂。

表格：不要在移動頁面上使用表格進行布局。盡量避開餐桌。并不是所有的手機都支持它們(盡管iPhone和其他智能手機都支持它們)，結果可能會很奇怪。

嵌套表：如果必須使用表，請確保不要將其嵌套在另一個表中。對于桌面瀏覽器來說，這些都是很難支持的，而且充其量也只能使頁面加載得更慢。

絕對度量：換句話說，不以絕對大小(如像素、毫米或英寸)定義對象的尺寸。如果您定義的東西為100px寬，那么在一個可能是屏幕一半的移動設備上，而在另一個移動設備上，它可能是屏幕寬度的兩倍。相對大小(如EMS和百分比)效果最好。

文章名稱：移動端網站建設需要特別注意的一些準則
URL地址：http://m.kartarina.com/news/155321.html

網站建設、網絡推廣公司-創新互聯，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有網站建設等

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容