Hello，移动WEB

最新推荐文章于 2024-12-10 14:28:31 发布

七块的学习笔记

最新推荐文章于 2024-12-10 14:28:31 发布

阅读量236

点赞数

分类专栏：编程语言文章标签：移动端

编程语言专栏收录该内容

42 篇文章

订阅专栏

原网址：https://www.imooc.com/learn/494

笔记博客:走进 web 移动端开发

  课程内容：
 1、移动WEB的基础知识
 2、高效的移动WEB布局
 3、终端交互优化


像素：
px逻辑像素，浏览器使用的抽象单位
dp,pt设备无关像素
dpr设备像素缩放比

我们可以通过Meta标签来控制viewport. 它的语法如下:

1	<meta name="viewport" content="name=value,name=value">

参数如下:

width: 设置布局 viewport 的特定值(“device-width”)
initial-scale: 设置页面的初始缩放
minimum-sacle: 最少缩放
maximum-scale: 最大缩放
user-scalable: 用户能否缩放

目前主流的编辑器在使用emmet生成基本HTML模板时都会自带插入一句

1	<meta name="viewport" content="width=device-width, initial-scale=1.0">

而有时候我们不希望用户能控制页面的缩放，那我们就可以设置user-scalable为no, 百度就是如下的做法:

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

然后网页宽度一般都用百分比，不要固定死。再用@media媒体查询，不同大小屏幕要做不同的css样式

手机浏览器默认为我们做了两件事情
1.页面渲染在一个980px(ios)的虚拟viewport（为了排版正确）
//这就是网页在手机上，会全屏显示的原因
2.缩放（排版正确后，再缩放到手机屏幕大小）

弹性滚动

当客户端的页面滚动到底部或顶部的时候, 滚动条会允许我们再向上(下)拖, 松开就会有缓冲反弹的效果, 能有一个良好的用户体验.

移动web页面也有这样的能力. 但是滚动有几种情况需要考虑(副作用):

body层滚动: (系统特殊化处理)
自带弹性滚动, overflow:hidden失效, GIF和定时器暂停
局部滚动: 没有弹性滚动, 没有滚动惯性, 不流畅

而局部滚动开启弹性滚动的方式也很简单, 只需要在body上添加如下的代码:

     
      body {
     
       
      /* android 不支持, 但是有类库支持*/
     
       
      overflow: hidden;
     
       
      -webkit-overflow-scrolling: touch;
     
     
      }

上拉刷新, 下拉加载

在移动端, 我们常常能看到这种 —— 顶部会允许下拉一小点距离, 松开时页会有弹性的滚动向下, 并且加载数据. 这是一种良好的交互. 多数类库或者插件都能实现这种效果.

移动端的事件

在移动web页面上，click事件响应都要慢上300ms，确认点击。

现在智能手机的普及, 触摸成为了移动设备的交互的核心事件, 主要有这几种常用的事件
• Touchstart: 手指触摸屏幕触发(只有第一下才会触发)
• Touchmove: 手指在屏幕滑动, 连续触发
• Touchend: 手指离开屏幕时触发
• Touchcanel: 系统取消touch时候触发(不常用)

除了常见的事件属性外, 触摸事件也有自己专有的触摸属性:

touches: 跟踪触摸操作的touch对象数组
targetTouches: 特定时间目标的touch对象数组
changeTouches: 上次触摸改变的touch对象数组

其中touches是最为常用的. 它是一个数组, 包含着几个touch对象, 每个touch对象包含如下属性:
• clientX: 触摸目标在视口中的x坐标
• clientY: 触摸目标在视口中的y坐标
• Identifier: 标识触摸的唯一ID
• pageX: 触摸目标在页面中的x坐标.
• pageY: 触摸目标在页面中的y坐标.
• screenX: 触摸目标在屏幕中的x坐标
• screenY: 触摸目标在屏幕中的y坐标
• target: 触摸的DOM节点目标