《移动端UI知识点整理》由会员分享，可在线阅读，更多相关《移动端UI知识点整理（22页珍藏版）》请在金锄头文库上搜索。
1、名词解释iPhone 各型号尺寸PX（像素） 屏幕上的点，绝对长度，与硬件相关。In（ inch，英寸）长度单位。mm（毫米） 长度单位。pt（磅） 1/72 英寸，point。DPI Dot per Inch 点每英寸(约 1.5cm) 物理分辨率DPR Device Pixel Ratio 320px 为 1，640px 为2设备象素比PPI Pixel per Inch 象素每英寸(约 1.5cm) 逻辑分辨率屏幕尺寸 屏幕的物理尺寸，以屏幕的对角线长度作为依据（比如 5 英寸，5.5 英寸）屏幕长宽比 屏幕长和宽的比例上图中的红字“display zoom”即为放大模式（老人模式） ，
2、upsampling 和 downsampling 意为宽度的缩放倍数IOS APP UI 设计尺寸IOS APP UI 设计，图片命名规则设计 APP 时，所有图片需要保存为 PNG 格式，如果是高清版本，需要将放大版的图片前缀加上2x，iPhone6 Plus 需要加 3x 前缀Viewport （可视区）viewport 可视区示意图上图中绿色部份为 viewport（上图为 iPhone3GS 默认的 viewport）上图中橙色部份为 viewport，不作任何设置，默认将为 980px 宽（逻辑分辨率）上图为对 viewport 进行了一系列设置，且进行了放大 1.5 倍后的可视区
3、上图是 PC 网页在手机中浏览的情况，阴影部份为 320 大小，看起来是不是很不适合？使用 meta 标签对 viewport 进行设置（设置数值）效果如上图（左：设置前；右：设置后）使用 meta 标签对 viewport 进行设置（设置为设备宽）注：这里的 device 不应翻译为设备；devide-width 将会使用移动设备的默认逻辑分辨率来呈现页面，即最上面第一张图表中的第一行“象素”尺寸。iPhone3GS 效果如上图（左：设置前；右：设置后） ，舒服了很多？注：iPhone3GS 默认逻辑分辨率为 320px 宽，所以右图显示宽为 320px。其它 viewport 参数：wid
4、th: 屏幕逻辑宽度initial-scale: 默认缩放倍数maximum-scale: 最大缩放倍数minimum-scale： 最小缩放倍数user-scalable： 用户是否可以对页面进行缩放js 获取默认逻辑分辨率的方法：window.innerWidth或者使用更详细的方法，见下例：移动端设备 Viewport 取值Viewportwindow.addEventListener(load, function (ev) var orientationchange = function () var orient = Math.abs(window.orientation) = 90
5、 ? landscape : portrait;document.body.innerHTML = orient + : + window.innerWidth + / + window.innerHeight + + navigator.userAgent;window.addEventListener(orientationchange, orientationchange, false);orientationchange();, false);测试前提:width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scal
6、able=0;测试方法:用移动设备打开，非 home screen 模式。横屏，记下 landscape 模式的 width 和 height 的值。竖屏，记下 portrait 模式的 width 和 height 的值。Git: https:/ web 的 meta 标签iPhone 私有标签，实现页面全屏浏览顺带一提 Android 的全屏用如下代码实现setTimeout(scrollTo,0,0,0);iPhone 私有标签，指定 iPhone 中 safari 顶端的状态条的样式；告诉设备忽略将页面中的数字识别为电话号码去除 Android 平台中对邮箱地址的识别禁止 safari
7、 对页面中 5 位数字的自动识别和自动添加样式，或者也可以通用 css 设置去掉手机点击链接的绿框-webkit-tap-highlight-color改写 iOS Safari 中可点击元素的高亮颜色。该属性可以只设置透明度。如果未设置透明度，iOS Safari 使用默认的透明度。当透明度设为 0，则会禁用此属性；当透明度设为 1，元素在点击时不可见。除了 iOS Safari，大部分 android 手机也是支持的，只是显示效果有所不同。语法-webkit-tap-highlight-color: color | transparent取值color 颜色。transparent 透明。
8、常用于 android 平台。移动端事件触摸事件touchstart：触摸开始的时候触发touchmove：手指在屏幕上滑动的时候触发touchend：触摸结束的时候触发而每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）：touches：当前位于屏幕上的所有手指的列表。targetTouches：位于当前 DOM 元素上手指的列表。changedTouches：涉及当前事件手指的列表。每个触摸点由包含了如下触摸信息（常用）：identifier：一个数值，唯一标识触摸会话（touch session）中的当前手指。一般为从 0 开始的流水号（androi
9、d4.1，uc）target：DOM 元素，是动作所针对的目标。pageX/pageX/clientX/clientY/screenX/screenY：一个数值，动作在屏幕上发生的位置（page包含滚动距离,client 不包含滚动距离，screen 则以屏幕为基准） 。radiusX/radiusY/rotationAngle：画出大约相当于手指形状的椭圆形，分别为椭圆形的两个半径和旋转角度。初步测试浏览器不支持，好在功能不常用，欢迎大家反馈。重力感应事件orientationchange阻止滚动document.body.addEventListener(touchmove, functi
10、on(event) event.preventDefault();, false);一些移动设备有缺省的 touchmove 行为，比如说经典的 iOS overscroll 效果，当滚动超出了内容的界限时就引发视图反弹。这种做法在许多多点触控应用中会带来混乱，可用上面的方法来禁用。在 javascript 中检测方向变更针对用户的物理设备操作，很多智能手机会更新屏幕的显示方向。例如，当用户将智能手机从纵向模式旋转为横向模式时，设备会通过切换屏幕的方向来做出反应。智能手机浏览器将此事件交由移动 Web 开发人员通过 JavaScript 使用浏览器 window 对象的 onresize 或o
11、norientationchange 事件进行处理。智能手机浏览器支持上面所述的两种事件中的一种或两种，因此在决定哪个事件最适宜在目标浏览器上进行处理时，机上测试起到至关重要的作用。iPhone 支持这两种事件，而移动开发人员通常只处理 onorirentationchange 事件即可检测方向变更。Android 和其他源自WebKit 的浏览器仅支持 onresize 事件。BlackBerry 设备针对 document 对象支持 onresize 事件，但是，只有少数的 BlackBerry 设备支持屏幕方向变更。在方向变更事件的事件处理程序内部，开发人员可以使用两种方法之一获取当前屏
12、幕尺寸和设备方向。iPhone 开发人员可以使用内置的 window.orientation Javascript 整数属性，该属性的值用于说明当前的浏览器方向。表 7-1 列出了 window.orientation 属性可能的值以及其意义。-90 设备方向为横向；屏幕以顺时针方向旋转（设备的按钮在左侧）0 设备方向为纵向；这是默认的属性值90 设备方向为横向；屏幕以逆时针方向旋转（设备的按钮在右侧）180 设备方向为纵向；屏幕上下翻转（iPhone 目前尚不支持此选项，但在将来的固件版本中可能会支持）下面的示例 JavaScript 代码使用内置的 window.orientation 属
13、性来确定智能手机的方向横式为横向还是纵向：略.见书此外，还可以使用内置的 JavaScript 属性 screen.widthy 和 screen.height 并执行简单的数学计算来确定设备的方向。如果屏幕的宽度大于高度，则设备的方向为横向。否则，设备的方向为纵向。下面的 JavaScript 示例代码命名用内置的 JavaScript 属性来确定设备的方向：var width = parseInt(screen.width);var height = parseInt(screen.height);if (width height) /方向为横向else /方向为纵向pageshow 事件
14、pageshow 事件的 event 对象 包含一个名为 persisted 的布尔值属性。如果页面中保存在了 bfcache 中，则这个属性的值为 true；否则，这个属性的值为 false移动端方法getBoundingClientRect() 返回当前对象宽高，以及距屏幕的上下左右距离getBoundingClientRect().width 返回 document 宽devicePixelRatio 获取设备象素比 320 为 1，640 为 2 其它资料Web App 实现 Fixed Position 和模拟滚动http:/ 最新的 Mobile Web APP 版新增的”摇一摇”功能所用到的 DeviceMotionEvent 事件http:/ js 多触式 web 前端开发之对于 Touch 的处理http:/
