ios主流手機網頁設計尺寸

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

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

2、有誰知道手機網頁設計尺寸。

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
以上是移動端的尺寸，單獨的如果某一個移動的網站的尺寸是沒有的，因為移動網站的一半情況是按照%比的尺寸 來自動適應屏幕的大小，或者也通過設置，iphone執行什麼尺寸，安卓情況執行什麼尺寸的。

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

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

4、iOS界面設計尺寸和解析度有哪些

1、目前蘋果手機的尺寸及解析度
iPhone界面尺寸：320*480、640*960、640*1136、750*1334、1080*1920等。
iPad界面尺寸：1024*768、2048*1536等。
單位：像素72dpi，在設計的時候並不是每個尺寸都要做一套，尺寸按自己的手機來設計，比較方便預覽效果，一般用640*960或者640*1136的尺寸來設計。
Ps：作圖的時候確保都是用形狀工具（快捷鍵：U）畫的，這樣更方便後期的切圖或者尺寸變更。
2、界面基本組成元素
iPhone的app界面一般由四個元素組成，分別是：狀態欄、導航欄、主菜單欄、內容區域。
640*960的尺寸設計下這些元素的尺寸。
· 狀態欄：就是我們經常說的信號、運營商、電量等顯示手機狀態的區域，其高度為：40px
· 導航欄：顯示當前界面的名稱，包含相應的功能或者頁面間的跳轉按鈕，其高度為：88px
· 主菜單欄：類似於頁面的主菜單，提供整個應用的分類內容的快速跳轉，其高度為：98px
· 內容區域：展示應用提供的相應內容，整個應用中布局變更最為頻繁，其高度為：734px

希望能給你幫助，另外你可以到百度文庫搜索相關關鍵字，相信會有你的資料。

5、做手機界面設計的尺寸是多少

從設計方面來看，做手機界面設計的尺寸一般分為iPhone和Android兩種設備。

如果以iPhone為設計設備，尺寸一般是使用750x1334，1125 x 2436，1242 x 2208這三種尺寸設計都可以，750x1334是2倍圖設計，1125x2346和1242x2208都是3倍圖來進行設計。

如果是用PS做設計稿就用750*1334，如果是用SKetch或者XD來設計，常見是用1倍尺寸來說，也就是375*667或者375*812（iPhone X）。

如果以Android為設備進行設計，尺寸一般使用720x1280，1080x1920進行設計第一種是2倍圖，第二種是3倍圖。

近年來iPhone和Android的設備增多，各尺寸也逐漸變多，下面有一份安卓屏幕尺寸表：

以及一份iOS屏幕解析度和尺寸表：

(5)ios主流手機網頁設計尺寸擴展資料：

1、UI界面設計的基本要素：

機界面層級： idle(待機界面) Mainmenu(主菜單) Submenu(二級菜單)Third level menu(三級菜單) 界面除了包括圖標和文字外，比較重要的還有function animation(呼叫，發送信息等) 以及 function interface(計算器，日歷界面等)

明確意義的圖標，風格鮮明的版面設計是手機界面設計的重要工作，較為流行的是以Motorola，Nokia等為代表的歐洲簡單風格，以及韓國的時尚絢麗的風格。

2、設計注意事項：

尺寸問題： 480X800，540X960，720X1280，1080X1920象素尺寸是較常見的手機屏幕尺寸，在設計時可以根據實際產品要求進行設計，更大的屏幕可以有更多的交互表現和視覺元素的支持，較為自由。

色彩問題： 由於手機lcd本身的限制，在色彩的還原程度上沒有pc如此完善，因此在選用色彩時要根據使用的屏幕進行調節。

可實現性問題： 受到硬體運算速度和內存的影響，以及不可預計的後台程序開發難度，過於復雜的效果將很難進行實現，與程序工程師和ui工程師，硬體工程師的溝通顯得尤為重要。

6、手機前端頁面尺寸

iPhone4/iPhone4s
320
*
372
/
320
*
441
(已隱藏URL與狀態欄)
iPhone5/iPhone5s
320
*
460
/
320
*
529
(已隱藏URL與狀態欄)
Note2
360
*
567
(未隱藏URL與狀態欄)
iPad
3/4
768*928
(未隱藏URL與狀態欄)
GALAXY
SIII
360
*
567
(未隱藏URL與狀態欄)
小米2A
360
*567
(未隱藏URL與狀態欄)
HTC
G10
320
*
460
<meta
name="viewport"
網頁手機wap2.0網頁的head里加入下面這條元標簽，在iPhone的瀏覽器中頁面將以原始大小顯示，並不允許縮放。
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0,
minimum-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
width
-
viewport的寬度
height
-
viewport的高度
initial-scale
-
初始的縮放比例
minimum-scale
-
允許用戶縮放到的最小比例
maximum-scale
-
允許用戶縮放到的最大比例
user-scalable
-
用戶是否可以手動縮放
參考：http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
一、網頁手機wap2.0網頁的head里加入下面這條元標簽，在iPhone的瀏覽器中頁面將以原始大小顯示，並不允許縮放。
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0,
minimum-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
其中：
width
-
viewport的寬度
height
-
viewport的高度
initial-scale
-
初始的縮放比例
minimum-scale
-
允許用戶縮放到的最小比例
maximum-scale
-
允許用戶縮放到的最大比例
user-scalable
-
用戶是否可以手動縮放c
二、關於meta的詳細介紹請參考
三、下文是關於Meta的例子的詳細介紹
原文地址
3.
Meta元素可視區
默認情況下，iPhone上的Safari會象在大屏幕的
桌面瀏覽器那樣顯示你的頁面，寬度達到了980像素，然後縮小內容以適應iPhone的小屏幕，因此用戶在iPhone看這個頁面時感覺字體就比較小了，
也比較模糊，必須要放大才能看得真切，對於一個普通的Web頁面似乎可以接受，但對於一個常用的應用程序就沒幾個人能夠受得了。
幸運的是可以使用特殊的Meta元素可視區進行糾正：
<meta
name="viewport"
content="width=device-width"/>
這個元素通知瀏覽器使用設備的寬度作為可視區的寬度，而不是默認的980像素了，我們可以看看兩個不同的例子。
　例3(鏈接：http://www.sitepoint.com/examples/iphone-development-12tips/no-
viewport.html)顯示了一個簡單的段落元素，沒有Meta元素可視區，字體有點模糊。在iPhone中運行的實際情況如下圖所示。
圖
1
無可視區的顯示效果
　例4(鏈接：http://www.sitepoint.com/examples/iphone-development-12tips
/viewport.html)包括了一個可視區元素，現在設備寬度只有320像素，字體也比前一個例子更清晰了。在iPhone中運行的實際情況如下圖
所示。
圖
2
有可視區的顯示效果
　另外，你還可以手動設置device-width的值，例如，假設你的博客頁面的寬度是750像素，那麼桌面屏幕最佳大小就是800x600像素，例
5(鏈接：http://www.sitepoint.com/examples/iphone-development-12tips
/fixed750.html)顯示了一個刪減版本，如果你在iPhone中瀏覽它，你會看到980像素剩下的空間都填充了白色。
為了消除額外的空間，可以使用meta元素可視區將寬度設為780像素：
<meta
name="viewport"
content="width=780"/>
例6(鏈接：http://www.sitepoint.com/examples/iphone-development-12tips/fixed750-viewport.html)顯示了meta元素可視區布局被固定後的效果。
Meta元素可視區的內容可以包括多個逗號分隔的值，如initial-scale
–
用戶最初看到頁面時的放大級別，對於Web應用程序，一個常見的設置是：
<meta
name="viewport"
content="width=device-width,initial-scale=1,user-scalable=no"/>
這個元素設置寬度為設備的最大寬度，禁止用戶放大和縮小

7、手機網頁UI設計尺寸是多少

這個不同手機尺寸不一樣，比如
iphone3 320*480 iphone4 640 * 960
android 240*320 320* 480 480* 854 這些比較常用，還有一些其他解析度
看你具體是針對什麼手機做的了！

8、做手機網頁要考慮哪幾種尺寸呀

1、如果是比較復雜的頁面，我們只需要第一屏撐滿全屏，可以使用此方法。單獨定義html和body的樣式。【html,body{width:100%;height:100%;}】。

2、然後給DIV添加嵌套樣式【.bg{width: 100%;height: 100%;background: #ff0000;}】並在DIV中引入bgCSS【<div class="bg"></div>】保存頁面後可以看到此時div也撐滿屏幕了。

3、為了方便觀察，我們在添加一個不同顏色的DIV【<div class="content"></div>】並定義CSS【width: 10rem;height: 5rem;background: #ffea00;】。保存後網上滑屏，可以看到後添加的DIV也可以正常顯示啦。

4、在瀏覽器開發者模式下，可以切換手機的型號，不同型號手機屏幕比例是不一樣的哦，可以看到，從普通的16:9的屏幕切換到iphone7時，屏幕雖然變長了，但是下面的黃色div是不會顯示出來的。

5、切換到最新的全面屏iphoneX時，依然是紅色的div撐滿全屏的。

6、上滑屏幕後才會看到下面的其他div模塊，這樣就可以實現想要的效果了。