移动端UI知识点整理概要1.docxVIP

名词解释PX（像素）屏幕上的点，绝对长度，与硬件相关。In（inch，英寸）长度单位。mm（毫米）长度单位。pt（磅）1/72英寸，point。DPIDot per Inch点每英寸(约1.5cm)物理分辨率DPRDevicePixelRatio320px为1，640px为2设备象素比PPIPixel per Inch象素每英寸(约1.5cm)逻辑分辨率屏幕尺寸屏幕的物理尺寸，以屏幕的对角线长度作为依据（比如5英寸，5.5英寸）屏幕长宽比屏幕长和宽的比例iPhone各型号尺寸上图中的红字“display zoom”即为放大模式（老人模式），upsampling和downsampling意为宽度的缩放倍数IOS APP UI设计尺寸IOS APP UI设计，图片命名规则设计APP时，所有图片需要保存为PNG格式，如果是高清版本，需要将放大版的图片前缀加上@2x，iPhone6 Plus需要加 @3x前缀Viewport（可视区）viewport可视区示意图上图中绿色部份为viewport（上图为iPhone3GS 默认的viewport）上图中橙色部份为viewport，不作任何设置，默认将为980px宽（逻辑分辨率）上图为对viewport进行了一系列设置，且进行了放大1.5倍后的可视区上图是PC网页在手机中浏览的情况，阴影部份为320大小，看起来是不是很不适合？使用meta标签对viewport进行设置（设置数值）meta name=“viewport” content=“width=590”效果如上图（左：设置前；右：设置后）使用meta标签对viewport进行设置（设置为设备宽）meta name=“viewport” content=“width=device-width”注：这里的device不应翻译为设备；devide-width 将会使用移动设备的默认逻辑分辨率来呈现页面，即最上面第一张图表中的第一行“象素”尺寸。iPhone3GS 效果如上图（左：设置前；右：设置后），舒服了很多？注：iPhone3GS默认逻辑分辨率为320px宽，所以右图显示宽为320px。其它viewport参数：meta name=viewport content=width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no /width:屏幕逻辑宽度initial-scale:默认缩放倍数maximum-scale:最大缩放倍数minimum-scale：最小缩放倍数user-scalable：用户是否可以对页面进行缩放js获取默认逻辑分辨率的方法：meta name=”viewport” content=”width=device-width” window.innerWidth或者使用更详细的方法，见下例：移动端设备Viewport取值!DOCTYPE htmlhtmlhead metacharset=utf-8 / metaname=viewportcontent=width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0; / titleViewport/title scriptwindow.addEventListener(load, function (ev) {varorientationchange=function () {var orient =Math.abs(window.orientation) ===90?landscape:portrait;document.body.innerHTML= orient + : +window.innerWidth+ / +window.innerHeight+br /+navigator.userAgent; };window.addEventListener(orientationchange, orientationchange, false);orientationchange(); }, false); /script/headbody测试前提:width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;测试方法:用移动设备打开，非home screen模式。横屏，记下landscape模式的width和height的值。竖屏，记下portrait模式的width和height的值。/body/htmlGit: /J