移动web/真机调试/touch/响应式

meta:vp  tab   1920高度*1080宽度  真机调试: chrome://inspect
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
dpi 1英寸范围内像素点个数
勾股定理算像素密度  屏幕斜线内像素点个数
获取设备独立像素:window.devicePixelRatio   与pixel的比例
物理像素:分辨率越高物理像素越小
window.screen.width
window.screen.height
视口:PC端视口大小和浏览器一样
但移动端不一样
document.documentElement.ClientWidth
document.documentElement.ClientHeight
viewport可视区 或者叫视口
在移动端 viewport一般会大于浏览器默认宽度 默认大小的viewport
layout viewport 布局视口  默认大于浏览器
ideal viewport 理想视口 就是手机浏览器大小,可见的区域
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
/*去除移动端特有的点击高亮效果*/
-webkit-tap-highlight-color: transparent;
中间弹性伸缩,两边固定的布局
flex有兼容性问题,
可以将中间设置margin 0 左右隔...
左右元素采用绝对定位的方式来实现。
也可以弄一个和父容器一样的容器 采用padding的方式
版心:
	width: 100%;
	max-width:640px;
	min-width:320px;
	margin: 0 auto;
	height: 1000px;
	background-color: gray;
设置默认偏移:
transform:translateX(-10%);
left:-100%;
当前元素必须使用relative定位,才能将父容器撑开。
移动端的tap事件:
touchstart  当手指触摸到屏幕的时候触发
touchmove  当手指在屏幕上移动的时候触发  、 持续触发。
touchend  当手指离开屏幕时候触发
touchcancel  触摸意外中断事件
事件对象 e
touches 当前屏幕上所有手指对象 多个手指
targetTouches 当前元素上的手指对象

screenX/screenY:是手指的触摸点相对于屏幕左上角的坐标距离
clientX/clientY:相对于当前视口--移动端屏幕
pageX/pageY:相对于当前页面的内容--会有滚动条,包含滚动条
Zepto.js  手机上的jQuery
打包定制zepto
安卓node.js
通过cmd命令进入到zepto解压缩之后的目录
npm install命令
打开make文件,找到target.build = ->
modules = (env['MODULES'] || 'zepto event ajax form ie').split(' ')
在里面添加想要的模块
保存完之后输入npm run-script dist

移动端tap事件,

touchstart和touchend 的时间间隔短于一个时间
获取手指个数=1,并且获取的鼠标位置偏移绝对值小于一个值,那么就是一个tap事件
在touchstart中用targetTouches获取手指个数集合
在touchend中用changedTouches获取
zepto
$("#dv").on("tap",function() {
	console.log('66666');
});
缺点:两个层是重叠的,点上面的层下面的事件也会触发。点透问题。。
fast-click 插件,既能在移动端使用又能在PC端使用,解决click的延迟问题。
if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
    	// 参数可以是任意的dom元素,如果写document.body,说明将body下的所有元素都绑定fastclick;
        FastClick.attach(document.body);
    }, false);
}或者:
$(function() {
	FastClick.attach(document.body);
});
iScroll  类似此种结构
<div id="wrapper">
    <ul>
        <li>...</li>
        <li>...</li>
        ...
    </ul>
</div>
#wrapper {
    width: 100%;
    height: 400px;
    overflow: hidden;
    border: 1px solid black;
    position: relative;
}
var myScroll = new IScroll('#wrapper ',{
	mouseWheel : true,
	scrollbars : true
});
实现滚动滑动操作的
轮播图:web-swipe插件: 类似此种结构
<div id='slider' class='swipe'>
  <div class='swipe-wrap'>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
-----------使用
window.mySwipe = Swipe(document.getElementById('slider'));
-----------加样式
.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}
touchslide.js 和 swiper.js插件
流畅滑动切换效果 
响应式开发:
媒体查询:查询当前设备屏幕的宽高。
超小屏幕<768px
小屏幕 768~992
中屏幕 992~1200
大屏  1200以上

<style type="text/css">
	body {
		background-color: red;
	}
	@media screen and (min-width:768px){
	body {
		background-color: green;
	}
	}
	@media screen and (min-width: 992px){
	body {
		background-color: blue;
	}
        }    	
	@media screen and (min-width: 1200px){
	body {
		background-color: purple;
	}    	
	}
</style>
Bootstrap
布局容器 class="container"
超小屏幕<768px     xs
小屏幕 768~992     sm
中屏幕 992~1200    md
大屏  1200以上     lg

发表评论

邮箱地址不会被公开。 必填项已用*标注