[前端学习]移动web部分学习笔记，第一天

流式布局

• 流式布局就是百分比布局，让元素的宽高自适应伸缩。这样可以有效的避免元素过宽，导致移动端设备不能显示完全的问题
• 目前来说，流式布局配合h5和c3是移动web开发最常用的处理方案

viewport

• 概念： PC浏览器在渲染html页面时，直接就在浏览器的窗口中显示。而移动端浏览器因为设备屏幕差异大的原因，就引入了viewport这一功能。它是一层虚拟的区域(我们是看不到的)，处于浏览器窗口和html页面中间。html页面渲染显示在viewport的区域中，不是直接显示到浏览器窗口
• 声明：viewport（窗口视图）实际上是通过meta标签来声明的，它只应用于移动端的浏览器，也只有移动端浏览器才能识别它
• 作用：通过设置viewport的content属性，我们可以控制html显示区域的宽度，缩放比，是否允许用户自行缩放等功能
• 原理：首先给html设置元素大小为100%,大小就能跟viewport一致。然后再让viewport与设备屏幕大小一致，这样通过一个中间层，就实现了html页面大小与设备屏幕大小一致，从而解决不同移动设备屏幕尺寸不一样的适配问题
  • content几个常用的属性介绍：
    • width=device-width设置viewport的显示宽度，也就是html页面的显示宽度，device-width是获取当前设备屏幕的宽度，这样就能自动适配显示区域大小。也可以设置成固定数值，不推荐
    • initial-scale=xx设置html页面在移动端显示的默认缩放比，一般默认设置1.0就是不做缩放
    • user-scalable=1||0设置是否允许用户自由缩放页面，1是允许，0是不允许
    • maximum-scale=xx设置最大缩放比
    • minimum-scale=xx设置最小缩放比
    • 前三个值是做常用的属性
  • 目前较通用的viewport设置写法：
  • 一些非通用的viewport设置方法
    • 淘宝网手机网页就没有设置宽度值，页面大小是正常pc端大小。他们的解决方案是通过js来判断当前设备的屏幕大小，再动态的设置viewport的缩放比，以达到自适应屏幕的效果
• 另外，viewport如果不设置，在手机端也会默认有，默认宽度是980px。这也是为什么一些pc页面直接在手机显示会缩放，因为设备宽度小于980

移动端布局常见问题

• 罗列一些常见可能会遇到的css布局问题

移动端设置点击高亮效果

• 网页在移动端展示时，会默认自带触碰时该元素区域高亮一下的效果，颜色为浅灰色
• 通过-webkit-tap-highlight-color:颜色||transparent，可以设置改样式的颜色，如果设置为透明就是不显示

所有盒子以边框开始计算宽度

• 就是之前c3中学到的box-sizing属性，因为移动端中设计到大量的百分比布局，如果不把边框和内边距计算在内，那么添加它们就会超出屏幕范围产生滚动条，这是不合理的。通过这个属性就能解决问题
• -webkit-box-sizing:border-box(兼容老浏览器)，box-sizing:border-box

清除默认表单控件样式

• 移动端不同浏览器的表单控件会自动加上一些样式，比如内阴影等。为了表现的效果统一，经常会清空默认加上的样式，再由我们自己来添加样式
• -webkit-appearance:none可以清除

最大宽度和最小宽度

• 虽然大部分情况下是百分比来设置，但是为保证设计图的清晰度，一般会限制最大宽度max-width和最小宽度min-width,目前行业通用设计稿最大是640px，最小是300px

搜索按钮调用

• 在移动端点击表单控件会自动弹出输入法，如果想要输入法中的enter(确认)键变成搜索按钮，需要用form标签把表单控件包裹起来，注意form标签不用写属性，传输地址#号或者其他无效地址代替就可

全屏页面设置

• 因为页面最顶级的元素是html，body次之。所以给它们两个设置宽高为100%，再让内部的元素参照它们就实现了全屏页面

定位参照伸缩盒子问题

• 正常情况下，子元素设置宽高100%是参照的父元素内容区域的宽高值。但是如果子元素设置了定位或者浮动，那么再设置宽高100%，它参照的就是父元素的实际宽高值

拓展知识-逻辑像素和物理像素

• 概念：现在的移动设备都使用高清屏（Retina技术），大致原理就是让一逻辑像素尺寸由两个或者更多个物理像素来组成，大幅度提高了显示的精度
• 举个例子：iphone4的屏幕尺寸是320x480，但是它的实际分辨率是640x960，就是2倍率。所以如果针对iphone4设备做图片，就要做640宽度的图片，然后放到320宽度的屏幕中显示，压缩了图片大小，精度也可以说清晰度就变高了
• 现在手机屏幕越来越清晰，倍率也越来越高，具体倍率计算原理暂时还没弄清楚，但是至少在做移动web开发时要有这个概念，不要直接1：1显示图片，会造成失真
• 目前主流解决方案：img引入的图片就用宽高来压缩，背景图片就用background-size来压缩
• 这个东西很重要，以后多研究研究，另外像素不是固定单位，很复杂

移动端事件

touch事件

• touch事件只会移动端浏览器上触发，总共有三个：
  • touchstart 当手指开始触摸时触发
  • touchmove 当手指触摸并开始移动时触发
  • touchend 当手指离开屏幕结束触摸时触发
  • 注意，在原生js中只能用addEventListener()方法来监听
• 在移动端touch事件的事件对象中增加了几个属性，需要注意的几个如下：
  • changedTouches 记录最新的所有改变触摸点，可以理解每发生触摸并离开后，它会记录一次放进数组。当下次再次触摸并离开，他会再次记录。在touchend事件的事件对象中，只有该属性
  • targetTouches 记录当前触摸元素内的所有触摸点，可以理解当次触摸可能不止一个手指，那么只要在目标元素内所有手指的触摸点都会被记录，放入数组
  • touches 记录当前触摸的所有触摸点，和上一个不同的是该属性不会区分是否在目标元素内，只要是在页面上触摸的所有点都会记录进数组
• 通过移动端touch事件的事件对象新增属性记录的触摸点，就可以获取到触摸点所在的坐标：
  • clientX||clientY触摸点在视口的横纵坐标
  • pageX||pageY触摸点在页面的横纵坐标
  • screenX||screenY触摸点在屏幕的横纵坐标
  • 通过这些坐标可以进行很多操作，比如判断用户滑动方向，滑动距离等
• 过渡效果结束事件
  • transitionEnd 过渡效果结束后会触发(如果需要满足兼容问题，还要同时绑定webkitTransitionEnd)
• 动画效果结束事件
  • animationEnd 动画效果结束后会触发(如果需要满足兼容问题，还要同时绑定webkitAnimationEnd)

zepto.js

介绍

• 移动端浏览器和pc端浏览器有一个本质的区别，那就是兼容性。移动端浏览器几乎都支持最新的h5和c3功能，所以如果移动端使用jquery框架来开发，一是体积太大，二是很多功能都没有意义（比如jquery的兼容处理以及一些动画API）
• zepto就是一个专门为移动端定制的框架，它有着与jquery类似的api，基本上会用jq就会用zepto。要注意的是zepto并不是100%覆盖了jq的功能
• zepto还有一点与jq不同，jq的引入文件是一个文件包含了所以的库代码，但是zepto将库代码以模块化来划分。默认引入文件只集成了几个基础的功能，其他功能需要引入对应的模块

定制zepto

• 一般来说开发都会用到多个功能模块，如果每个模块都引入，那么请求次数就太多了。所以zepto也支持你将多个模块功能整合到一个文件中
• 1.安装node
• 2.使用node命令行工具进入zepto主文件
• 3.运行npm install
• 4.修改make文件的target.build项，加入你想增加的模块功能
• 5.运行npm run-script dist
• 然后会生产一个dist文件，定制版的库文件就在dist文件中

移动端的点击事件

• 在pc的点击事件是click，但是在移动端click点击事件会有300ms左右的延迟(因手机性能差异以及点击快慢会有波动)，所以一般不建议在移动端使用click作为点击事件
  • 造成的原因是：早期手机网页不能很好的自适应显示的内容都很小，所以苹果公司为了解决这个问题，增加了双击放大的技术。正因为这个技术，手机浏览器会给click事件一定的延迟等待，来判断用户是单击还是双击，后来很多浏览器厂商在移动端都效仿了这个功能

tap事件

• 移动端会优先响应touch事件(几乎没有延迟)，所以现在常用的是用touch事件来模拟点击功能，代替click事件，大多数框架中都会封装tap事件(jq、zepto等)，直接绑定事件就可以使用。但是要注意：tap事件也有一个副作用，那就是点透
• 简单说明下点透：如果两个元素重叠在了一起，如果下面的元素绑定了其他点击类事件，那么你给上面的元素绑定了tap事件。当用户操作时，上面的元素执行完tap事件后，下面的元素也会触发它绑定的事件。相当于就是点击指令透到下面的元素了，这是个很严重的问题，而且经常会遇到
• 正常情况下，移动端开发单击就使用tap事件。如果因为设计或者需求原因，而导致出现点透的情况，那么解决方案可以使用fastclick插件

移动端较常用的插件介绍

fastclick插件

• 关于fastclick插件：这个插件的作用是解决移动端click事件有300ms左右延迟的问题。因为touch事件是优先触发的，所以才会有点透的问题。而click事件不是，就不会有出现点透。并且touch事件只有移动端才会触发，而click在pc端和移动端都能触发
• 所以实际上fastclick解决了两个问题：一、点透；二、同一页面pc端移动端都能点击
• 这个插件在开发中比较常用。使用方法和具体原理查看说明文档
• github下载地址：https://github.com/ftlabs/fastclick

iscroll插件

• 关于iscroll插件：这个插件是一个功能类库，它提供了大部分常用的页面元素滚动滑动功能。比如：页面拖动、缩略放大图、元素拖拽、页面滚动等等，非常强大。并且它同时兼容pc端和移动端
• github下载地址：https://github.com/cubiq/iscroll
• 使用方法和具体原理查看说明文档

swipe插件

• 关于swipe插件：实现轮播图功能的插件，同时兼容pc端和移动端
• 使用方法和具体原理查看说明文档
• github下载地址：https://github.com/thebird/Swipe

swiper插件

• 关于swiper插件：专注于提供移动端触摸滑动的效果的插件，其实也是同时兼容pc端和移动端的，相对于swipe插件，不仅覆盖了全部功能而且更加强大多样，但是体量也更大。可根据实际情况来选择使用
• 使用方法和具体原理查看官方中文网：http://www.swiper.com.cn
• github下载地址：https://github.com/nolimits4web/swiper