h5深度剖析
移动端适配方案
Media Queries
meida queries 主要是通过查询设备的宽度来执行不同的 css 代码，最终达到界面的配置。核心语法是：
@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
/*你的css代码*/
}
优点
media query可以做到设备像素比的判断，方法简单，成本低，特别是对移动和PC维护同一套代码的时候- 调整屏幕宽度的时候不用刷新页面即可响应式展示
缺点
- 代码量比较大，维护不方便
- 为了兼顾大屏幕或高清设备，会造成其他设备资源浪费，特别是加载图片资源
- 为了兼顾移动端和PC端各自响应式的展示效果，难免会损失各自特有的交互方式
Flex弹性布局
详见本章节：flex布局
rem
rem布局使我们现在项目开发非常常用的一种布局方式，他通过和流式布局搭配使用，rem布局可以让图标图片文字，在不同的屏幕下显示正常的比例，rem现在使用度很高
rem 属于一个单位，在设置完根元素的像素之后，rem就属于固定的像素单位了
在浏览器当中默认的 1rem = 16px
rem的值
目前有两种，一种是根据js来调整html的字号，另一种则是通过媒体查询来调整字号。
- js
(function () {
window.addEventListener('resize',size,false);
size()
function size() {
var winW=document.documentElement.clientWidth||document.body.clientWidth;
document.documentElement.style.fontSize=winW/750*100+'px'
}
})()
winW=750宽度的话，根元素=》100px,
iphone 5 winW=640 根元素=》85.3px
- css
我们知道html的默认字号是16px，则对应的设备下可以通过设置对应的font-size使其有一致的缩放比例。
html {
font-size: 100px;
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
html {
font-size: 42.67px !important;
}
}
@media only screen and (min-width: 480px) and (max-width: 639px) {
html {
font-size: 64px !important;
}
}
@media only screen and (min-width: 640px) and (max-width: 749px) {
html {
font-size: 85.34px !important;
}
}
@media only screen and (min-width: 750px) and (max-width: 959px) {
html {
font-size: 100px !important;
}
}
移动端事件
- click：单击事件，类似于PC端的click，但在移动端中，连续click的触发有200ms ~ 300ms的延迟
- touchstart：手指触摸到屏幕会触发
- touchmove：当手指在屏幕上移动时，会触发
- touchend：当手指离开屏幕时，会触发
- touchcancel：可由系统进行的触发，比如手指触摸屏幕的时候，突然alert了一下，或者系统中其他打断了touch的行为，则可以触发该事件
- tap: 手指碰一下屏幕会触发
- longTap: 手指长按屏幕会触发
- singleTap: 手指碰一下屏幕会触发
- doubleTap: 手指双击屏幕会触发
- swipe：手指在屏幕上滑动时会触发
- swipeLeft：手指在屏幕上向左滑动时会触发
- swipeRight：手指在屏幕上向右滑动时会触发
- swipeUp：手指在屏幕上向上滑动时会触发
- swipeDown：手指在屏幕上向下滑动时会触发
移动端常见问题
- 一些情况下对非可点击元素(label，span)监听点击事件，不会再IOS下触发，css增加cursor:pointer
- click300ms延迟响应，使用Fastclick、禁用双击缩放、zepto的tag事件
- ios设置input按钮样式会被默认样式覆盖，可以将默认样式设置为none
- ios键盘字母输入，默认首字母大写，input中加入autocapitalize=‘off’
- 移动端点透问题，尽量都使用touch事件来替换click事件。例如touchend事件(推荐)，用fastclick
- 滑动卡顿，解决：-webkit-overflow-scrolling:touch；
- 默认情况下，设备会自动识别任何可能是电话号码的字符串。设置telephone=no可以禁用这项功能
- 长时间按住页面出现闪退，element
- iphone及ipad下输入框默认内阴影，element
- 旋转屏幕时，字体大小调整问题，html，body，from，fieldset，p，div,h1,h2,h3,h4,h5,h6
webApp与响应式的区别
响应式
响应式是指同一个页面在不同分辨率的设备上都能有比较合适的显示效果，是目前webApp页面设计和开发的主流方式，但本质是网页，并不是应用。
webApp
而webApp是利用web技术开发本地应用，多为移动设备访问，通过webview提供一个容器，里面的内容是用网页技术实现的。当然也有开放平台中通过ewb技术实现的网页应用，通过电脑访问的。webApp的界面通常设计的和本地应用非常接近，目的是减少本地应用容量、统一客户端更新、利用web技术实现更加丰富的可视化效果等。
meat标签讲解
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
- name="viewport" :视口
- width=device-width ：屏幕的宽度=设备的宽度
- user-scalable=no ：是否允许用于缩放
- initial-scale=1.0 ：初始缩放值1:1
- maximum-scale=1.0 ：最大的缩放值1:1
- minimum-scale=1.0" : 最小的缩放值1:1
