移动Web

Pixel移动开发像素知识

px:css pixels逻辑像素,浏览器使用的抽象单位

dp,pt:device independent pixels设备无关像素(物理像素,固定大小)

dpr:devicePixelRatio设备像素缩放比

计算公式:1px = dpr ² * dp;

DPI:打印机每英寸可以喷的墨汁点(印刷行业)

PPI:屏幕每英寸的像素数量,即单位英寸内的像素密度

目前,在计算机显示设备参数描述上,二者意思表达是一样的.

计算公式:以iPhone5为例子

ppi=√(1136²+640²)/4 = 326ppi(视网膜Retina屏)

注意:单位为硬件像素,非px.

PPI越高,像素数越高,图像越清晰

但可视度越低(小),系统默认设置缩放比越大

解释:640*1136 换算为320*568 是因为 1个逻辑像素由四个物理像素组成,2*2的结构,所以,并不是直接除4,1136/2=568, 640/2=320



ViewPort

手机浏览器默认为我们做了两件事情

一:页面渲染在一个980px(ios)的viewport

为了排版正确,伪造一个虚拟的viewport.

二:缩放

但是不建议使用默认的980px的viewport(了解即可):①宽度不可控制,不同系统不同设备的默认值都可能不同;②页面缩小版显示,交互不友好;③链接不可点;④有缩放,缩放后又有滚动.

Viewport Meta标签

<meta name="viewport"      content="width=device-width,initial-scale=1 user-scalable=no" >

·width:设置布局viewport的特定值("device-width")——时刻让viewport宽度等于设备宽度

·initial-scale:设置页面的初始缩放——[initial-scale=1]时刻让度量viewport等于布局viewport

·minimum-scale:最少缩放

·maximum-scale:最大缩放

user-scalable:用户能否缩放

默认的布局viewport可以用document.body.clientWidth去查;度量viewport可以用window.innerWidth去查

设计移动Web

方案一:根据设备的实际宽度来设计(常用)

方案二:1px=1dp  缩放0.5.根据设备的物理像素dp等于抽象像素px来设计。1像素边框和高清图片都不需要额外处理。



Flexbox弹性盒子布局





移动Web特别样式处理

1.在移动web页面上渲染图片,为了避免图片产生模糊,图片的宽高应该用物理像素单位渲染,即是100*100的图片,应该使用100dp*100dp。

width:(w_value/dpr)px;

height:(h_value/dpr)px;

2.一像素边框


不使用rem的情况:font-size.

一般来讲font-size是不应该使用rem等相对单位的。因为字体的大小是趋向于阅读的实用性,并不适合于排版布局。

同理趋向于一些固定的元素的特性。我们不使用rem而改为使用px去确保在不同屏幕上表现一致(跟rem的目的相反)

4.多行文本溢出




Tap基础事件




Touch事件

触摸才是移动设备的交互的核心事件

touchstart:手指触摸屏幕触发(已经有手指放屏幕上不会触发)

touchmove:手指在屏幕滑动,连续触发

touchend:手指离开屏幕时触发

除常见的事件属性外,触摸事件包含专有的触摸属性

touches:跟踪触摸操作的touch对象数组

targetTouches:特定时间目标的touch对象数组

changeTouches:上次触摸改变的touch对象数组

弹性滚动

当客户端的页面滚动到顶部或底部的时候,滚动条会收缩并让我们多滑动一定距离。通过缓冲反弹的效果,带给用户良好的体验。

移动web页面也是拥有这样的能力的,但滚动有几种情况需要考虑:

body层滚动:(系统特殊化处理)

自带弹性滚动,overflow:hidden失效,GIF和定时器暂停

局部滚动:

没有弹性滚动,没有滚动惯性,不流畅

上拉加载

使用scroll事件,而不是touch事件(android有bug)

推荐阅读更多精彩内容

  • 写在前面 这篇文章并不是我写的教程,而是看了慕课网碧仔老师的课程《Hello,移动WEB》而做的笔记。 我觉得这个...
    李心doge阅读 550评论 0 15
  • 像素基础 px 逻辑像素,浏览器使用的抽象单位 dp,pt 设备无关像素 dpr 设备像素缩放比=独立像素 / 物...
    最时光阅读 131评论 0 1
  • 一、流式布局 1.1 什么是流式布局 流式布局就是百分比布局,通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩...
    福尔摩鸡阅读 3,779评论 2 15
  • 刚开始做移动端web开发的同学应该都碰到过页面适配问题,为什么我在开发手机上调试好的页面在其他手机会有这样或那样的...
    留七七阅读 17,271评论 5 80
  • 残缺的诗篇 一首情歌 幻化无数青丝 我看过残阳如血 撒下的一地绯红 映照着的飞宫琉璃 飞起的鸽子 以及溢满的茶碗 ...
    枫林雨歇阅读 63评论 0 1
  • 夏天在别人的眼中是非常讨厌的季节,因为它的天气让人很不喜欢,可是在我眼里,夏天不是这样的。而是充满着生命,可以让...
    段柯成阅读 69评论 0 2
  • “盆景”,顾名思义,即有盆有景,一瓯盆容纳一抹景色,由小窥大,让人在日常生活中实现诗意的栖居成为可能。去过古典园林...
    小胖Victor阅读 282评论 0 1