導航:首頁 > 萬維百科 > 手機web網頁設計尺寸

手機web網頁設計尺寸

發布時間:2021-03-12 23:53:19

1、HTML5移動網頁的設計稿尺寸應該是多少

HTML5的移動端網頁設計稿,通常情況下,內容區為750px或960px或者1080px的,一般不小於750px像素大小(寬度)
設計稿可以比750px大,但是絕對不能比750px小,這個主要是由於當前手機的解析度相對較高(iPhone 6是375物理像素,但實際像素為其兩倍,也就是750,這個750就是這么來的)
如果設計圖稿過小,前端在實現圖稿的時候裡面的圖片大小在高解析度的情況下會顯得模糊不清,所以這也是為何要「大」解析度
此外需要注意的是,要保證頁面的基準字體大小,在320px的設計稿當中,最小字體不宜小於12像素,其他像素的設計稿當中,等比例換算即可(12/320px*設計稿像素值)

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

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模塊,這樣就可以實現想要的效果了。

3、製作網頁電腦網頁跟手機網頁尺寸各多少

網頁尺寸:
自己或者企業的話,這個你隨便定,一般寬度是在950-1200之間
手機尺寸:
620(480)寬*任意高,要是自己或者用其他軟體的話請參考軟體的要求。

4、網頁設計最合適的頁面尺寸是多少?

網頁設計標准尺寸:

1. 800×600下,網頁寬度保持在778以內,就不會出現水平滾動條,高度則視版面和內容決定。

2. 1024×768下,網頁寬度保持在1002以內,如果滿框顯示的話,高度是612눯之間,就不會出現水平滾動條和垂直滾動條。

3. 在ps裡面做網頁可以在800×600狀態下顯示全屏,頁面的下方又不會出現滑動條,尺寸為740×560左右。

4. 在PS里做的圖到了網上就不一樣了,顏色等等方面,因為web上面只用到256web安全色,而PS中的RGB或者CMYK以及LAB或者HSB的色域很寬顏色范圍很廣,所以自然會有失色的現象。

5、手機前端頁面尺寸

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"/>
這個元素設置寬度為設備的最大寬度,禁止用戶放大和縮小

6、移動端web在設計時寬度尺寸是多少合適

基本上都是640吧,高度由於是專題,可以不受限制的

7、移動端web在設計時寬度尺寸是多少合適?

首先說現象,大家都知道移動端設備屏幕尺寸非常多,碎片化嚴重。尤其是Android,你會聽到很多種解析度:480x800, 480x854, 540x960, 720x1280, 1080x1920,而且還有傳說中的2K屏。近年來iPhone的碎片化也加劇了:640x960, 640x1136, 750x1334, 1242x2208。
不要被這些尺寸嚇倒。實際上大部分的app和移動端網頁,在各種尺寸的屏幕上都能正常顯示。說明尺寸的問題一定有解決方法,而且有規律可循。
像素密度
要知道,屏幕是由很多像素點組成的。之前提到那麼多種解析度,都是手機屏幕的實際像素尺寸。比如480x800的屏幕,就是由800行、480列的像素點組成的。每個點發出不同顏色的光,構成我們所看到的畫面。而手機屏幕的物理尺寸,和像素尺寸是不成比例的。最典型的例子,iPhone 3gs的屏幕像素是320x480,iPhone 4s的屏幕像素是640x960。剛好兩倍,然而兩款手機都是3.5英寸的。

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

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

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

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

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

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

與手機web網頁設計尺寸相關的知識