手機網頁代碼設計

1、網頁設計中，如何讓頁面自適應手機端？

一般來說，通過CSS3，可以直接對不同解析度下的樣式進行定義，比如如下的代碼。
/* PC或中大型筆記本設備 desktop */ @media all and (min-width: 1201px) { .title-desktop{ display: block !important; } .container { width: 1100px; } } /* 中小型筆記本或大平板 laptop */ @media all and (min-width: 980px) and (max-width: 1200px) { .title-laptop{ display: block !important; } .container { width: 920px; } }
但是上面的方法，可能不會兼容老版本ie。
所以也可以通過js，識別當前頁面的解析度，來給出樣式，這種比較好也比較復雜，代碼量很多但是一般沒有兼容問題。

2、有關手機網頁設計的問題

你這是做的滑鼠經過效果，而在手機上是不存在經過事件的，只有點擊事件。所以你版點擊相權當於經過。但是沒辦法用獲取 滑鼠離開。所以就一直出現了。
你要改成JQ代碼。
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>

<script>$("#nav>li").click(function(){ $("#nav>li>ul").toggleClass("on");});</script>
把你CSS的77行代碼 ：
#nav li:hover > ul { display: block;}
改成
.on {display:block}

3、手機網頁設計多大好?

wap頁面設計一般都是寬度自適應的，最窄以兼容320px為標准，最寬1280px為標准，
一般的智能手機寬度都是320，480，640這些，
其中iPhone就不用說了吧，必須是480px，
其他三星啊，htc啊什麼的，各類解析度都有，基本不會比480低，
但是之前剛開始的一些智能手機大部分都是320，所有要兼容320哦~~~

4、自適應手機屏幕代碼

自適應手機屏幕代碼：

<meta name="viewport" content="width=device-width">
<meta
name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

首先就是自適應（說白了就是用百分比來設寬度），最外框肯定是用百分比的，但是一些小的部分就不能用百分比了，不然就會變形，就比如你說的圖片，圖片盡量定死了，不然不同的手機屏幕大小不一定，所顯示的就不一樣，甚至會變形了。你可以通過控制圖片外面的DIV來控制位置，讓它在符合美學的位置。

(4)手機網頁代碼設計擴展資料：

CSS+DIV網站設計的問題

盡管CSS+DIV具有一定的優勢，不過現階段CSS+DIV網站建設存在的問題也比較明顯，主要表現在：

第一，對於CSS的高度依賴使得網頁設計變得比較復雜。相對於HTML4.0中的表格布局（table），CSS+DIV盡管不是高不可及，但至少要比表格定位復雜的多，即使對於網站設計高手也很容易出現問題，更不要說初學者了，這在一定程度上影響了XHTML網站設計語言的普及應用。

第二，CSS文件異常將影響整個網站的正常瀏覽。CSS網站製作的設計元素通常放在幾個l外部文件中，這一個或幾個文件有可能相當復雜，甚至比較龐大，如果CSS文件調用出現異常，那麼整個網站將變得慘不忍睹。

第三，對於CSS網站設計的瀏覽器兼容性問題比較突出。基於HTML4.0的網頁設計在IE4.0之後的版本中幾乎不存在瀏覽器兼容性問題，但CSS+DIV設計的網站在IE瀏覽器裡面正常顯示的頁面，到火狐瀏覽器（FireFox
）中卻可能面目全非（這也是為什麼建議網路營銷人員使用火狐瀏覽器的原因所在 ）。CSS+DIV還有待於各個瀏覽器廠商的進一步支持。

第四，CSS+DIV對搜索引擎優化與否取決於網頁設計的專業水平而不是CSS+DIV本身。CSS+DIV網頁設計並不能保證網頁對搜索引擎的優化，甚至不能保證一定比HTML網站有更簡潔的代碼設計，何況搜索引擎對於網頁的收錄和排序顯然不是以是否採用表格和CSS定位來衡量，這就是為什麼很多傳統表格布局製作的網站在搜索結果中的排序靠前，而很多使用CSS及web標准製作的網頁排名依然靠後的原因。因為對於搜索引擎而言，網站結構、內容、相關網站鏈接等因素始終是網站優化最重要的指標。

參考資料：網路.代碼

5、手機端網頁設計尺寸多少

iPhone手機網頁的設計尺寸

iPhone5尺寸是640x1136px解析度是326PPI
iPhone4和iPhone4S尺寸是640x960px解析度是326PPI
iPhone和iPodTouch第一代、第二代、第三代尺寸是320x480px解析度是163PPI

安卓網頁的設計尺寸

320dp：一個普通的手機屏幕（240X320，320×480，480X800）
480dp：一個中間平板電腦像（480×800）
600dp：7寸平板電腦（600×1024）
720dp：10寸平板電腦（720×1280，800×1280）

ipad網頁的設計尺寸

iPad第三代第四代尺寸是2048x1536px解析度是264PPI
iPad第一代第二代尺寸是1024x768px解析度是132PPI
iPad Mini尺寸是1024x768px解析度是163PPI

6、手機網頁設計排版需要注意的幾個事項

我們對手機網站製作中需要注意哪些方面的問題展開分析，為各位手機網站製作的用戶們提供一些參考，現總結幾點如下：

1、明確自己想在手機網站上展示哪些信息：

在手機網站製作之前應該明確自己想在手機網站上展示什麼，分析一下可能的瀏覽者會有哪些，然後有針對性地策劃和設計網站上的相關內容，這樣才能做到有的放矢，不至於手機網站製作好了卻沒人瀏覽，或者瀏覽了不感興趣。如果能做到有針對性的進行手機網站製作，通常手機網站在推廣之後都會為企業帶來一定量的潛在用戶。

2、在手機網站製作時要盡量符合滑動屏幕的方式：

一般的手機屏幕，畫面都不如桌上電腦那麼大，尤其是閱讀文字時更需要加以放大。即使智能手機具有網頁放大縮小功能，但是觀看起來也較為麻煩，因為網頁放大後，很可能還要左右滑動才能瀏覽網頁，瀏覽後還要縮小回原大小。因此在設計手機網頁時，應能夠以滑動屏幕的方式來閱讀網頁，因為滑動網頁操作比著放大網頁觀看來要簡單得多。

3、不能參照PC端網站來設計手機網站上的導航功能：

手機網頁與跟一般的PC端網頁不同，由於受到手機屏幕大小和屏幕操作的限制，在設計導航功能時應該按照手機屏幕來設計，不能完全照搬PC端網站，該簡單的地方簡單化，該去掉的去掉，同時在當閱讀文章到最後時，要方便於用戶回到最前頭，減少卷動畫面的機會，讓網頁變得更容易於移動設備上閱讀。

4、手機網站製作也要考慮多種瀏覽器的兼容：

現在的移動瀏覽器能夠處理大多數網站，一般的瀏覽器都能夠正常瀏覽網頁。但由於手機上的瀏覽器也有多種，比如UC瀏覽器、360瀏覽器、搜狗瀏覽器、其他瀏覽器，如此多的瀏覽器在瀏覽網頁的時候，如果手機網站的兼容性差，就很可能會出現在某些瀏覽器上出現網頁變形、內容顯示不全的情況。因此，手機網站製作必須考慮到兼容於多種瀏覽器。

5、在手機網站製作時一定要減少用戶文字輸入操作：

現在智能手機一般都沒有實體的鍵盤，或僅只有12鍵的電話輸入功能，因此在輸入文字上會比起使用電腦鍵盤麻煩得多。因此，減少使用者輸入文字的機會，例如用戶名、密碼等，都是手機網站製作時要盡力避免的。

6、在手機網站製作時就應該考慮到日後的推廣和宣傳：

在手機網站製作時，不要忽略了用戶體驗，否則在日後的網站推廣時將會遇到麻煩。任何一個手機網站，都必須經過廣策劃、設計和推廣的過程，在手機網站製作時需要考慮日後的推廣，手機網站應該在豐富站內內容的同時，提供詳盡的產品信息以及聯系方式，並收集有關產品的用戶滿意度和顧客需求方面的反饋信息。這樣的手機網站上線後，其推廣工作也會非常有效果。

7、手機網站製作要兼顧非觸摸屏幕的設計：

雖然大多數手機都是智能手機，但也有為數不少的傳統手機，不具備觸摸的功能，使用的是傳統的控制方向鍵做為滑動的工具，這時候，手機網頁的製作應兼顧到非觸摸屏的手機瀏覽。比如減少畫面中超鏈接的數量、加大文字以減少誤點。

8、在手機網站製作時要記得要簡化網頁內容：

一般的手機、平板電腦等移動設備，由於屏幕大小的限制，不易容納下個人電腦的大容量的網頁資訊，因此手機網站製作的首要一點就是減少網頁內容，最好不用圖片或是影音視頻等，文字也應該精簡，但要保持網頁內容的可讀性。只需要將最重要的資訊放入移動版網頁，不太重要的內容內容，可以略去，或者通過超鏈接鏈接到新網頁上。

9、手機網站製作要注重網頁產品和服務的展示：

企業在手機網站上，需要表現的重點仍然是產品和服務的展示。移動用戶訪問企業手機網站往往是有備而來，想了解某個產品或者服務的詳細價格、服務內容和功能。所以企業在手機網站上的產品和服務展示，可選擇企業的主要產品，對其各類參數或價格加以詳細說明，對於企業的新產品，也可以適當的加以介紹，必要時可以採用圖文並茂的方式，但圖片的體積應盡量小。

以上是在手機網站製作中需要注意的幾個方面，手機網站頁面設計需要符合用戶體驗，以方便用戶操作為准則，能夠為用戶帶來切實的幫助，這是手機網站製作上的基本要求，也是滿足用戶需求的基本原則。

7、手機網頁應該怎樣設計?

一、選用合適的字體。

手機網頁設計成功離不開排版，排版應該獲得和圖片同樣的重視。雖然可供選擇的字體很多，設計師要考慮的方面很多，比如說，目標客戶和客戶公司的性質。為手機網站頁眉和內容選用合適的字體是必不可少的，無襯線字體和有襯線字體通常會為設計帶來良好的效果。除此之外，你還可以結合其它字體，專為孩子和女性打造網站。

二、選擇合適的配色方案。

任何手機網站的設計都離不了合適的配色方案，這對創建一個整潔干凈的網站同樣適用。堅持使用淡色和非彩色的投影對成功設計一個簡潔網站大有裨益。淺色的投影可以幫助用戶把焦點轉向網站內容。標志使用黑色和較深的投影，手機網頁中的頁眉和導航元素使用淺色背景，這些都是不錯的案例，並沒有規定在簡潔網頁設計中不能使用大膽的顏色，但是這樣的顏色要小心，剋制地使用。有時候，手機網站有必要使用深色背景色來吸引某些目標用戶。比起漸變色，有些手機網站更鍾愛純色。如果你的手機網站非得要使用紋理和漸變色，也不要用得太過火。

三、提高頁面載入速度，手機網站以簡潔為主。

一般來說，手機網站在用戶下載和瀏覽時要比PC端網站的速度慢得多，頁面東西太復雜，會耗掉用戶等待網站載入的耐心，尤其是導航欄要簡短清晰，能夠快速地指引用戶瀏覽網站的深層信息。對於網站內容來說，簡潔突出重點就好，所謂的內容越豐富越好已不適用於手機網站了。

四、避免使用彈窗。

無論是出於方便用戶聯系網站客服還是做些小廣告的目的，都要盡可能避免彈出窗口的應用，手機網站本來載入速度就慢，再添加這些窗口，必然會影響用戶體驗，阻礙用戶瀏覽網站的視線，進而佔用用戶流量，引起反感而放棄對網站的繼續訪問。

五、手機網站圖片要適配設置。

從手機上瀏覽網站必然沒有那麼方便，操作也不如PC端靈活自如，前面也說到了使用網站設計技術可以解決網站適應屏幕的問題，網站圖片也不例外，但為了用戶能將頁面使用圖片的地方看得更加清晰，可採用整站縮放的模式，而不是用戶點擊單張圖片的縮放模式，當然，手機網站能少用圖片是最好的。 六、網站操作簡單化。關於新頁面的打開方式，最好採用當前頁面顯示的方式來設計，以免新窗口造成網站資源佔用的負擔，同時對於出現網站錯誤的現象最好設置提醒，讓用戶快速找到頁面出口進行跳轉，而不是不斷地進行返回操作。

七、互動式的互動行為。

用戶在移動客戶端都喜歡進行留言，分享功能。特別是看到一篇很棒的帖子都會選擇分享到朋友圈或者空間中，讓朋友也參與裡面。例如現在比較流行的做就是做微信公眾號大咖們，往往一篇帖子都會造成幾千人的持續瀏覽、點贊或者分享內容，粉絲喜歡中這種參與行為，因為這種圈子拉動粉絲在持續發酵中，用戶慢慢都會捨不得離開。

8、手機端網頁設計

meta標簽是位於<head>標簽中的一個設定網頁的重要元素標簽，
第一個meta標簽代碼一般用於手機端，因為每個手機型號的屏幕不一樣，所以這個代碼可以讓網頁自己適應手機端的屏幕大小顯示。
第二個meta標簽代碼代表電話號碼，手機號碼，並檢測手機號碼的格式，手機可以識別點擊然後自動撥號。