国精产品一码一码三mba,91超碰大香蕉,99爱国产,91国产正在播放,九九色网,干穴视频,好吊色视频一区二区,性欧美老妇另类

我們一直愛護(hù)這個(gè)行業(yè)，不欺詐，更專注！24小時(shí)咨詢熱線：400-999-3352

首頁 > 行業(yè)新聞

移動(dòng)端頁面設(shè)計(jì)規(guī)范尺寸、h5頁面設(shè)計(jì)規(guī)范尺寸，h5適配

2021-04-29

移動(dòng)端尺寸繁多，包括IOS和安卓，尺寸多達(dá)十余種，所以移動(dòng)頁面尺寸的適配一直是前端和設(shè)計(jì)的頭疼。今天來總結(jié)一下當(dāng)前市場(chǎng)上的一些移動(dòng)端尺寸，方便設(shè)計(jì)師和前端去考慮適配。但是最好還是針對(duì)自己的產(chǎn)品做調(diào)查，根據(jù)數(shù)據(jù)去做主流適配。

①iPhone的設(shè)計(jì)尺寸

iPhone界面尺寸：

設(shè)備	分辨率	狀態(tài)欄高度	導(dǎo)航欄高度	標(biāo)簽欄(工具欄)高度
iPhone6 plus設(shè)計(jì)版	1242 × 2208	60px	132px	146px
iOS APP設(shè)計(jì)一稿支持iPhone5/iPhone6/Plus設(shè)計(jì)流程
iPhone6 plus物理版	1080 × 1920	54px	132px	146px
iOS APP設(shè)計(jì)一稿支持iPhone5/iPhone6/Plus設(shè)計(jì)流程
iPhone6	750 × 1334	40px	88px	98px(88px)
iPhone5s	640 × 1136	40px	88px	98px(88px)
iPhone5c	640 × 1136	40px	88px	98px(88px)
iPhone5	640 × 1136	40px	88px	98px(88px)
iPhone4s	640 × 960	40px	88px	98px(88px)
iPhone4	640 × 960	40px	88px	98px(88px)

iPhone圖標(biāo)尺寸：

系統(tǒng)	分辨率	圓角大小
iOS 6-	90px - 1024px	約為圖標(biāo)寬度 × 0.175
iOS 7+	90px - 1024px	約為圖標(biāo)寬度 × 0.225

Asset	iPhone 6 Plus (@3x)	iPhone 6 and iPhone 5 (@2x)	iPhone 4s (@2x)	iPad and iPad mini (@2x)	iPad 2 and iPad mini (@1x)
App icon (required for all apps)	180 × 180	120 × 120	120 × 120	152 × 152	76 × 76
App icon for the App Store (required for all apps)	1024 × 1024	1024 × 1024	1024 × 1024	1024 × 1024	1024 × 1024
Launch file or image (required for all apps)	Use a launch file (see Launch Images)	For iPhone 6, use a launch file (see Launch Images) For iPhone 5, 640 × 1136	640 × 960	1536 × 2048 (portrait) 2048 × 1536 (landscape)	768 × 1024 (portrait) 1024 × 768 (landscape)
Spotlight search results icon (recommended)	120 × 120	80 × 80	80 × 80	80 × 80	40 × 40
Settings icon (recommended)	87 × 87	58 × 58	58 × 58	58 × 58	29 × 29
Toolbar and navigation bar icon (optional)	About 66 × 66	About 44 × 44	About 44 × 44	About 44 × 44	About 22 × 22
Tab bar icon (optional)	About 75 × 75 (maximum: 144 × 96)	About 50 × 50 (maximum: 96 × 64)	About 50 × 50 (maximum: 96 × 64)	About 50 × 50 (maximum: 96 × 64)	About 25 × 25 (maximum: 48 × 32)
Default Newsstand cover icon for the App Store (required for Newsstand apps)	At least 1024 pixels on the longest edge	At least 1024 pixels on the longest edge	At least 1024 pixels on the longest edge	At least 1024 pixels on the longest edge	At least 512 pixels on the longest edge
Web clip icon (recommended for web apps and websites)	180 × 180	120 × 120	120 × 120	152 × 152	76 × 76

②iPad的設(shè)計(jì)尺寸

iPad界面尺寸：

設(shè)備	分辨率	狀態(tài)欄高度	導(dǎo)航欄高度	標(biāo)簽欄高度
iPad6/iPad Air2	2048 × 1536	40px	88px	98px
iPad5/iPad Air/ipad mini 2	2048 × 1536	40px	88px	98px
iPad4/ipad mini	2048 × 1536	40px	88px	98px
iPad3/the new iPad	2048 × 1536	40px	88px	98px
iPad2	1024 × 768	20px	44px	49px
iPad1	1024 × 768	20px	44px	49px
iPad Mini	1024 × 768	20px	44px	49px

iPad圖標(biāo)尺寸：

系統(tǒng)	分辨率	圓角大小
iOS 6-	90px - 1024px	約為圖標(biāo)寬度 × 0.175
iOS 7+	90px - 1024px	約為圖標(biāo)寬度 × 0.225

Asset	iPhone 6 Plus (@3x)	iPhone 6 and iPhone 5 (@2x)	iPhone 4s (@2x)	iPad and iPad mini (@2x)	iPad 2 and iPad mini (@1x)
App icon (required for all apps)	180 × 180	120 × 120	120 × 120	152 × 152	76 × 76
App icon for the App Store (required for all apps)	1024 × 1024	1024 × 1024	1024 × 1024	1024 × 1024	1024 × 1024
Launch file or image (required for all apps)	Use a launch file (see Launch Images)	For iPhone 6, use a launch file (see Launch Images) For iPhone 5, 640 × 1136	640 × 960	1536 × 2048 (portrait) 2048 × 1536 (landscape)	768 × 1024 (portrait) 1024 × 768 (landscape)
Spotlight search results icon (recommended)	120 × 120	80 × 80	80 × 80	80 × 80	40 × 40
Settings icon (recommended)	87 × 87	58 × 58	58 × 58	58 × 58	29 × 29
Toolbar and navigation bar icon (optional)	About 66 × 66	About 44 × 44	About 44 × 44	About 44 × 44	About 22 × 22
Tab bar icon (optional)	About 75 × 75 (maximum: 144 × 96)	About 50 × 50 (maximum: 96 × 64)	About 50 × 50 (maximum: 96 × 64)	About 50 × 50 (maximum: 96 × 64)	About 25 × 25 (maximum: 48 × 32)
Default Newsstand cover icon for the App Store (required for Newsstand apps)	At least 1024 pixels on the longest edge	At least 1024 pixels on the longest edge	At least 1024 pixels on the longest edge	At least 1024 pixels on the longest edge	At least 512 pixels on the longest edge
Web clip icon (recommended for web apps and websites)	180 × 180	120 × 120	120 × 120	152 × 152	76 × 76

③Android的設(shè)計(jì)尺寸

屏幕尺寸

指實(shí)際的物理尺寸，為屏幕對(duì)角線的測(cè)量。
為了簡單起見，Android把實(shí)際屏幕尺寸分為四個(gè)廣義的大小：小，正常，大，特大。

像素（PX）

代表屏幕上一個(gè)物理的像素點(diǎn)代表屏幕上一個(gè)物理的像素點(diǎn)。

屏幕密度

為解決Android設(shè)備碎片化，引入一個(gè)概念DP，也就是密度。指在一定尺寸的物理屏幕上顯示像素的數(shù)量，通常指分辨率。為了簡單起見，Android把屏幕密度分為了四個(gè)廣義的大小：低（120dpi）、中（160dpi）、高（240dpi）和超高（320dpi）像素= DP * （ DPI / 160 ) 例如，在一個(gè)240dpi的屏幕里，1DP等于1.5PX。
于設(shè)計(jì)來說，選取一個(gè)合適的尺寸作為正常大小和中等屏幕密度（尺寸的選取依據(jù)打算適配的硬件，建議參考現(xiàn)主流硬件分辨率），然后向下和向上做小、大、特大和低、高、超高的尺寸與密度。

典型的設(shè)計(jì)尺寸

• 320dp：一個(gè)普通的手機(jī)屏幕（240X320，320×480，480X800）
• 480dp：一個(gè)中間平板電腦像（480×800）
• 600dp：7寸平板電腦（600x1024）
• 720dp：10寸平板電腦（720x1280，800x1280）

Android安卓系統(tǒng)dp/sp/px換算表

名稱	分辨率	比率 rate (針對(duì)320px)	比率 rate (針對(duì)640px)	比率 rate (針對(duì)750px)
idpi	240 × 320	0.75	0.375	0.32
mdpi	320 × 480	1	0.5	0.4267
hdpi	480 × 800	1.5	0.75	0.64
xhdpi	720 × 1280	2.25	1.125	1.042
xxhdpi	1080 × 1920	3.375	1.6875	1.5

主流Android手機(jī)分辨率和尺寸

設(shè)備	分辨率	尺寸	設(shè)備	分辨率	尺寸
三星Galaxy S3	4.8英寸	720 × 1280	三星Galaxy S4	5英寸	1080 × 1920
三星Galaxy S5	5.1英寸	1080 × 1920	三星Galaxy S6	4.5英寸	1200 × 1920
小米1	4英寸	480 × 854	小米1s	4英寸	480 × 854
小米2	4.3英寸	720 × 1280	小米2s	4.3英寸	720 × 1280
小米3	5英寸	1080 × 1920	小米3s(概念)	5英寸	1080 × 1920
小米4	5英寸	1080 × 1920	紅米	4.7英寸	720 × 1280
紅米Note	5.5英寸	720 × 1280
OPPO Find 7	5.5英寸	1440 × 2560	OPPO Find 7 輕裝版	5.5英寸	1080 × 1920
OPPO N1 mini	5英寸	720 × 1280	OPPO R3	5英寸	720 × 1280
OPPO R1S	5英寸	720 × 1280
錘子 Smartisan T1	4.95英寸	1080 × 1920
華為 Ascend P7	5英寸	1080 × 1920	華為 Ascend Mate7	6英寸	1080 × 1920
華為榮耀6	5英寸	1080 × 1920	華為 Ascend Mate2	6.1英寸	720 × 1280
華為 C199	5.5英寸	720 × 1280
HTC One (M8)	5英寸	1080 × 1920	HTC Desire 820	5.5英寸	720 × 1280
魅族 MEIZU MX4	5.36英寸	1152 × 1920	魅族 MEIZU MX3	5.1英寸	1080 × 1800

④Web的設(shè)計(jì)尺寸

Windows XP任務(wù)欄的高度30px Windows 7任務(wù)欄的高度40px

主流瀏覽器的界面參數(shù)

瀏覽器	狀態(tài)欄	菜單欄	滾動(dòng)條
Chrome瀏覽器	22px（浮動(dòng)出現(xiàn)）	60px	15px
火狐瀏覽器	狀態(tài)欄高度	導(dǎo)航欄高度	標(biāo)簽欄高度
IE瀏覽器	狀態(tài)欄高度	導(dǎo)航欄高度	標(biāo)簽欄高度
360瀏覽器	狀態(tài)欄高度	導(dǎo)航欄高度	標(biāo)簽欄高度

系統(tǒng)分辨率統(tǒng)計(jì)

安全分辨率為1024 × 768 px 可建議大分辨率為1280 × 800 px

綜合分辨率及瀏覽器下的統(tǒng)計(jì)數(shù)據(jù)

網(wǎng)頁寬度與首屏高度

安全寬度1002 px 可建議較大寬度1258 px

Window XP首屏大小580 px Window 7 首屏大小710 px

上一篇：響應(yīng)式網(wǎng)站的優(yōu)缺點(diǎn)有哪些？下一篇：劉璽潼個(gè)人簡歷

新聞搜索

近期新聞

熱點(diǎn)新聞

才高八斗公司2025年態(tài)度，
才高八斗制定不了行業(yè)標(biāo)準(zhǔn)，也制定不了每個(gè)客戶的內(nèi)心標(biāo)準(zhǔn)，卻可以制定才高八斗的標(biāo)準(zhǔn)：
做網(wǎng)站（只有網(wǎng)站建設(shè)及周邊配套）需要也只要合理的利潤，用心做好每個(gè)網(wǎng)站。
不僅是幫您做網(wǎng)站，以后都是您互聯(lián)網(wǎng)的咨詢顧問！

24小時(shí)咨詢熱線：400-999-3352 版權(quán)所有北京才高八斗科技發(fā)展有限公司京ICP備09022199號(hào)