怎么网站建设怎么样,企业网站的功能,海南省住房公积金管理局咨询电话,vestacp配置wordpress移动端尺寸繁多#xff0c;包括IOS和安卓#xff0c;尺寸多达十余种#xff0c;所以移动页面尺寸的适配一直是前端和设计的头疼。今天来总结一下当前市场上的一些移动端尺寸#xff0c;方便设计师和前端去考虑适配。但是最好还是针对自己的产品做调查#xff0c;根据数据去…移动端尺寸繁多包括IOS和安卓尺寸多达十余种所以移动页面尺寸的适配一直是前端和设计的头疼。今天来总结一下当前市场上的一些移动端尺寸方便设计师和前端去考虑适配。但是最好还是针对自己的产品做调查根据数据去做主流适配。IphoneIpadAndroidWEB全部规范全在这儿了①iPhone的设计尺寸iPhone界面尺寸设备分辨率状态栏高度导航栏高度标签栏(工具栏)高度iPhone6 plus设计版1242 × 220860px132px146pxiOS APP设计一稿支持iPhone5/iPhone6/Plus设计流程iPhone6 plus物理版1080 × 192054px132px146pxiOS APP设计一稿支持iPhone5/iPhone6/Plus设计流程iPhone6750 × 133440px88px98px(88px)iPhone5s640 × 113640px88px98px(88px)iPhone5c640 × 113640px88px98px(88px)iPhone5640 × 113640px88px98px(88px)iPhone4s640 × 96040px88px98px(88px)iPhone4640 × 96040px88px98px(88px)iPhone图标尺寸系统分辨率圆角大小iOS 6-90px - 1024px约为图标宽度 × 0.175iOS 790px - 1024px约为图标宽度 × 0.225AssetiPhone 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 × 180120 × 120120 × 120152 × 15276 × 76App icon for the App Store(required for all apps)1024 × 10241024 × 10241024 × 10241024 × 10241024 × 1024Launch 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 × 1136640 × 9601536 × 2048 (portrait)2048 × 1536 (landscape)768 × 1024 (portrait)1024 × 768 (landscape)Spotlight search results icon(recommended)120 × 12080 × 8080 × 8080 × 8040 × 40Settings icon(recommended)87 × 8758 × 5858 × 5858 × 5829 × 29Toolbar and navigation bar icon(optional)About 66 × 66About 44 × 44About 44 × 44About 44 × 44About 22 × 22Tab 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 edgeAt least 1024 pixels on the longest edgeAt least 1024 pixels on the longest edgeAt least 1024 pixels on the longest edgeAt least 512 pixels on the longest edgeWeb clip icon(recommended for web apps and websites)180 × 180120 × 120120 × 120152 × 15276 × 76②iPad的设计尺寸iPad界面尺寸设备分辨率状态栏高度导航栏高度标签栏高度iPad6/iPad Air22048 × 153640px88px98pxiPad5/iPad Air/ipad mini 22048 × 153640px88px98pxiPad4/ipad mini2048 × 153640px88px98pxiPad3/the new iPad2048 × 153640px88px98pxiPad21024 × 76820px44px49pxiPad11024 × 76820px44px49pxiPad Mini1024 × 76820px44px49pxiPad图标尺寸系统分辨率圆角大小iOS 6-90px - 1024px约为图标宽度 × 0.175iOS 790px - 1024px约为图标宽度 × 0.225AssetiPhone 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 × 180120 × 120120 × 120152 × 15276 × 76App icon for the App Store(required for all apps)1024 × 10241024 × 10241024 × 10241024 × 10241024 × 1024Launch 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 × 1136640 × 9601536 × 2048 (portrait)2048 × 1536 (landscape)768 × 1024 (portrait)1024 × 768 (landscape)Spotlight search results icon(recommended)120 × 12080 × 8080 × 8080 × 8040 × 40Settings icon(recommended)87 × 8758 × 5858 × 5858 × 5829 × 29Toolbar and navigation bar icon(optional)About 66 × 66About 44 × 44About 44 × 44About 44 × 44About 22 × 22Tab 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 edgeAt least 1024 pixels on the longest edgeAt least 1024 pixels on the longest edgeAt least 1024 pixels on the longest edgeAt least 512 pixels on the longest edgeWeb clip icon(recommended for web apps and websites)180 × 180120 × 120120 × 120152 × 15276 × 76③Android的设计尺寸屏幕尺寸指实际的物理尺寸为屏幕对角线的测量。为了简单起见Android把实际屏幕尺寸分为四个广义的大小小正常大特大。像素(PX)代表屏幕上一个物理的像素点代表屏幕上一个物理的像素点。屏幕密度为解决Android设备碎片化引入一个概念DP也就是密度。指在一定尺寸的物理屏幕上显示像素的数量通常指分辨率。 为了简单起见Android把屏幕密度分为了四个广义的大小低(120dpi)、中(160dpi)、高(240dpi)和超高(320dpi) 像素 DP * ( DPI / 160 ) 例如在一个240dpi的屏幕里1DP等于。于设计来说选取一个合适的尺寸作为正常大小和中等屏幕密度(尺寸的选取依据打算适配的硬件建议参考现主流硬件分辨率)然后向下和向上 做小、大、特大和低、高、超高的尺寸与密度。典型的设计尺寸• 320dp一个普通的手机屏幕(240X320320×480480X800)• 480dp一个中间平板电脑像(480×800)• 600dp7寸平板电脑(600x1024)• 720dp10寸平板电脑(720x1280800x1280)Android安卓系统dp/sp/px换算表名称分辨率比率 rate (针对320px)比率 rate (针对640px)比率 rate (针对750px)idpi240 × 3200.750.3750.32mdpi320 × 48010.50.4267hdpi480 × 8001.50.750.64xhdpi720 × 12802.251.1251.042xxhdpi1080 × 19203.3751.68751.5主流Android手机分辨率和尺寸设备分辨率尺寸设备分辨率尺寸三星Galaxy S34.8英寸720 × 1280三星Galaxy S45英寸1080 × 1920三星Galaxy S55.1英寸1080 × 1920三星Galaxy S64.5英寸1200 × 1920小米14英寸480 × 854小米1s4英寸480 × 854小米24.3英寸720 × 1280小米2s4.3英寸720 × 1280小米35英寸1080 × 1920小米3s(概念)5英寸1080 × 1920小米45英寸1080 × 1920红米英寸720 × 1280红米Note英寸720 × 1280 OPPO Find 7英寸1440 × 2560OPPO Find 7 轻装版英寸1080 × 1920OPPO N1 mini5英寸720 × 1280OPPO R35英寸720 × 1280OPPO R1S5英寸720 × 1280 锤子 Smartisan T14.95英寸1080 × 1920 华为 Ascend P75英寸1080 × 1920华为 Ascend Mate76英寸1080 × 1920华为 荣耀65英寸1080 × 1920华为 Ascend Mate26.1英寸720 × 1280华为 C199英寸720 × 1280 HTC One (M8)5英寸1080 × 1920HTC Desire 820英寸720 × 1280魅族 MEIZU MX45.36英寸1152 × 1920魅族 MEIZU MX35.1英寸1080 × 1800④Web的设计尺寸Windows XP任务栏的高度30px Windows 7任务栏的高度40px主流浏览器的界面参数浏览器状态栏菜单栏滚动条Chrome浏览器22px(浮动出现)60px15px火狐浏览器状态栏高度导航栏高度标签栏高度IE浏览器状态栏高度导航栏高度标签栏高度360浏览器状态栏高度导航栏高度标签栏高度系统分辨率统计安全分辨率为1024 × 768 px 可建议大分辨率为1280 × 800 px综合分辨率及浏览器下的统计数据网页宽度与首屏高度安全宽度1002 px 可建议较大宽度1258 pxWindow XP首屏大小580 px Window 7 首屏大小710 px本文由 w3cmark_前端笔记 版权所有转载时请注明出处。注明出处格式w3cmark ()
