Mobile page Design specifications Large-scale bottom

Http://www.w3cmark.com/2014/354.html

With a wide range of mobile dimensions, including iOS and Android, the size of the mobile page has always been a headache for the front-end and design, with up to 10 sizes. Today to summarize some of the current market mobile size, convenient for designers and front-end to consider adaptation. But it is better to do research on their own products, according to the data to do mainstream adaptation.

Iphone&ipad&android&web All the specs are here!! Design dimensions of ①iphone

iphone interface Size:

Equipment	Resolution	Status bar Height	Navigation Bar Height	tab Bar (Toolbar) height
IPhone6 Plus Design version	1242x2208	60px	132px	146px
IOS App Design Draft supports Iphone5/iphone6/plus design process
IPhone6 Plus physical version	1080x1920	54px	132px	146px
IOS App Design Draft supports Iphone5/iphone6/plus design process
IPhone6	750x1334	40px	88px	98PX (88px)
IPhone5S	640x1136	40px	88px	98PX (88px)
iphone5c	640x1136	40px	88px	98PX (88px)
IPhone5	640x1136	40px	88px	98PX (88px)
Iphone4s	640x960	40px	88px	98PX (88px)
IPhone4	640x960	40px	88px	98PX (88px)

iphone icon Size:

System	Resolution	Fillet size
IOS 6-	90px-1024px	Approx. width of icon x0.175
IOS 7+	90px-1024px	Approx. width of icon x0.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)	180x180	120x120	120x120	152x152	76x76
App icon for the app Store (Required for all apps)	1024x1024	1024x1024	1024x1024	1024x1024	1024x1024
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, 640x1136	640x960	1536x2048 (Portrait) 2048x1536 (Landscape)	768x1024 (Portrait) 1024x768 (Landscape)
Spotlight Search Results icon (recommended)	120x120	80x80	80x80	80x80	40x40
Settings icon (recommended)	87x87	58x58	58x58	58x58	29x29
Toolbar and navigation bar icon (optional)	About 66X66	About 44X44	About 44X44	About 44X44	About 22x22
Tab bar icon (optional)	About 75X75 (maximum:144x96)	About 50x50 (maximum:96x64)	About 50x50 (maximum:96x64)	About 50x50 (maximum:96x64)	About 25X25 (maximum:48x32)
Default Newsstand cover icon for the App Store (Required for Newsstand apps)	At least 1024x768 pixels on the longest edge	At least 1024x768 pixels on the longest edge	At least 1024x768 pixels on the longest edge	At least 1024x768 pixels on the longest edge	At least pixels on the longest edge
Web clip icon (Recommended for web apps and websites)	180x180	120x120	120x120	152x152	76x76

Design dimensions of ②ipad

ipad Interface Size:

Equipment	Resolution	Status bar Height	Navigation Bar Height	tab Bar Height
Ipad6/ipad Air2	2048x1536	40px	88px	98px
Ipad5/ipad Air/ipad Mini 2	2048x1536	40px	88px	98px
Ipad4/ipad Mini	2048x1536	40px	88px	98px
Ipad3/the New IPad	2048x1536	40px	88px	98px
IPad2	1024x768	20px	44px	49px
IPad1	1024x768	20px	44px	49px
IPad Mini	1024x768	20px	44px	49px

ipad icon Size:

System	Resolution	Fillet size
IOS 6-	90px-1024px	Approx. width of icon x0.175
IOS 7+	90px-1024px	Approx. width of icon x0.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)	180x180	120x120	120x120	152x152	76x76
App icon for the app Store (Required for all apps)	1024x1024	1024x1024	1024x1024	1024x1024	1024x1024
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, 640x1136	640x960	1536x2048 (Portrait) 2048x1536 (Landscape)	768x1024 (Portrait) 1024x768 (Landscape)
Spotlight Search Results icon (recommended)	120x120	80x80	80x80	80x80	40x40
Settings icon (recommended)	87x87	58x58	58x58	58x58	29x29
Toolbar and navigation bar icon (optional)	About 66X66	About 44X44	About 44X44	About 44X44	About 22x22
Tab bar icon (optional)	About 75X75 (maximum:144x96)	About 50x50 (maximum:96x64)	About 50x50 (maximum:96x64)	About 50x50 (maximum:96x64)	About 25X25 (maximum:48x32)
Default Newsstand cover icon for the App Store (Required for Newsstand apps)	At least 1024x768 pixels on the longest edge	At least 1024x768 pixels on the longest edge	At least 1024x768 pixels on the longest edge	At least 1024x768 pixels on the longest edge	At least pixels on the longest edge
Web clip icon (Recommended for web apps and websites)	180x180	120x120	120x120	152x152	76x76

Design dimensions of ③android

Screen size

Refers to the actual physical size, which is the measurement of the diagonal of the screen.
For the sake of simplicity, Android divides the actual screen size into four generalized sizes: small, normal, large, oversized.

Pixel (px)

Represents a physical pixel point on the screen that represents a physical pixel on the screen.

Screen density

To solve the fragmentation of Android devices, introduce a concept DP, which is density. Refers to the number of pixels displayed on a physical screen of a certain size, usually referred to as resolution. For simplicity, Android divides the screen density into four generalized sizes: Low (120DPI), Medium (160DPI), High (240dpi), and Ultra High (320dpi) pixels = DP * (dpi/160) For example, on a 240dpi screen, 1DP equals 1.5PX.
In the design, choose a suitable size as normal and medium screen density (the size of the selection according to the hardware to be adapted, it is recommended to refer to the current mainstream hardware resolution), and then down and up small, large, big and low, high, ultra-high size and density.

Typical Design dimensions

320DP: A normal phone screen (240x320,320x480,480x800)
480DP: An intermediate tablet image (480x800)
600dp:7 inch Tablet PC (600x1024)
720dp:10 inch Tablet PC (720x1280,800x1280)

Android System dp/sp/px Conversion table

Name	Resolution	Ratio rate (for 320px)	Ratio rate (for 640px)	Ratio rate (for 750px)
idpi	240x320	0.75	0.375	0.32
mdpi	320x480	1	0.5	0.4267
hdpi	480x800	1.5	0.75	0.64
xhdpi	720x1280	2.25	1.125	1.042
xxhdpi	1080x1920	3.375	1.6875	1.5

Mainstream Android phone resolution and size

Equipment	Resolution	Size	Equipment	Resolution	Size
Samsung Galaxy S3	4.8 inch	720x1280	Samsung Galaxy S4	5 inch	1080x1920
Samsung Galaxy S5	5.1 inch	1080x1920	Samsung Galaxy S6	4.5 inch	1200x1920
Xiaomi 1	4 inch	480x854	Millet 1s	4 inch	480x854
Xiaomi 2	4.3 inch	720x1280	Millet 2s	4.3 inch	720x1280
Xiaomi 3	5 inch	1080x1920	Xiaomi 3s (concept)	5 inch	1080x1920
Xiaomi 4	5 inch	1080x1920	Red Rice	4.7 inch	720x1280
Red Rice Note	5.5 inch	720x1280
OPPO Find 7	5.5 inch	1440x2560	OPPO Find 7 Light Edition	5.5 inch	1080x1920
OPPO N1 Mini	5 inch	720x1280	OPPO R3	5 inch	720x1280
OPPO R1s	5 inch	720x1280
Hammer Smartisan T1	4.95 Inch	1080x1920
Huawei Ascend P7	5 inch	1080x1920	Huawei Ascend Mate7	6 inch	1080x1920
Huawei Glory 6	5 inch	1080x1920	Huawei Ascend Mate2	6.1 Inch	720x1280
Huawei C199	5.5 inch	720x1280
HTC One (M8)	5 inch	1080x1920	HTC Desire 820	5.5 inch	720x1280
Meizu Meizu MX4	5.36 inch	1152x1920	Meizu Meizu MX3	5.1 inch	1080x1800

Design dimensions of ④web

Height of Windows XP taskbar 30px windows 7 taskbar height 40px

Interface parameters for mainstream browsers

Browser	Status bar	Menu bar	scroll bar
Chrome browser	22PX (floating appearance)	60px	15px
Firefox browser	Status bar Height	Navigation Bar Height	tab Bar Height
IE browser	Status bar Height	Navigation Bar Height	tab Bar Height
360 browser	Status bar Height	Navigation Bar Height	tab Bar Height

System resolution Statistics

A security resolution of 1024x768 px can be recommended for a large resolution of 1280x800 px

Comprehensive resolution and browser statistics

Page width and first screen height

Safety width 1002 px can be recommended for a larger width 1258 px

Window XP first screen size 580 px Window 7 first screen size 710 px

This article by W3cmark_ front -end note All rights reserved, when reproduced please indicate the source.
SOURCE format: W3cmark (http://www.w3cmark.com/2014/354.html)

Mobile page Design specifications Large-scale bottom