移动Web开发
三种布局
- 有最大、最小宽度的百分比自适应布局
适用场景：门户网站首页，图片较多的首页。 - 百分比自适应布局
适用场景：信息文字较多的网页，内容较多网页。 - 全屏自适应布局
适用场景：单页面网页，移动web app 页面。
Box-sizing在移动端的使用
在百分比定宽的页面经常使用。
*,
::before,
::after{
-webkit-box-sizing: border-box;
/*以你的border开始计算你的宽度*/
}
移动端事件
-
Touch
-
touchstart：当手指触碰屏幕时候发生。不管当前有多少只手指
-
touchmove：当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，
会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动 -
touchend：当手指离开屏幕时触发
-
touchcancel：系统停止跟踪触摸时候会触发。
例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用 -
注意：
1，不能通过dom.onTouchXxx的方式去绑定
2，只能通过addEventListener的方式去绑定
3，touch事件只在移动设备上支持
dom.documentElement.addEventListener("touchstart", function (event) {
console.log("touch start");
console.dir(event);
});
dom.documentElement.addEventListener("touchmove", function (event) {
console.log("touch move");
console.dir(event);
});
dom.documentElement.addEventListener("touchend", function (event) {
console.log("touch end");
console.dir(event);
});
例：鼠标跟随
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background-color: #f00;
}
.box{
width: 20px;
height: 20px;
background-color: #fff;
border: 1px solid purple;
}
</style>
</head>
<body>
<div class="box"></div>
<script type="text/javascript">
var startX = 0;
var startY = 0;
var moveX = 0;
var moveY = 0;
var distanceX = 0;
var distanceY = 0;
document.documentElement.addEventListener("touchstart", function (event) {
console.log("touch start");
console.dir(event);
startX = event.touches[0].clientX;
startY = event.touches[0].clientY;
});
document.documentElement.addEventListener("touchmove", function (event) {
// console.log("touch move");
// console.dir(event);
moveX = event.touches[0].clientX - startX;
moveY = event.touches[0].clientY - startY;
var div = document.querySelector("div");
div.style.transform = "translate("+(moveX+distanceX)+"px,"+(moveY+distanceY)+"PX)";
});
document.documentElement.addEventListener("touchend", function (event) {
console.log("touch end");
console.dir(event);
distanceX += moveX;
distanceY += moveY;
});
</script>
</body>
</html>
-
触摸事件的响应顺序
1、ontouchstart
2、ontouchmove
3、ontouchend
4、onclick200ms延时
移动端click事件的触发会延迟200ms，为了提升用户体验，能够实时触发，我们一般会自己封装一个tap方法，实现手指快速点击
touch只有三个，左右滑动、长按等都是封装出来的。 -
封装tap点击方法
-
touchstart ：记录开始时间
-
touchmove：
1，手指不动不触发
2，只要改方法触发，默认为点击失效
3，不移动逻辑可以在这里处理 -
touchend：记录和开始时间的差值
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/>
<style type="text/css">
html,body{
height: 100%;
}
body{
background-color: pink;
}
</style>
<script type="text/javascript">
window.onload = function () {
tap(document.body, function () {
console.log("点击");
});
//封装点击方法
function tap(element,callBack){
var startTime = 0;
var maxDelay = 250;
//是否移动了
var isMove = false;
element.addEventListener("touchstart", function () {
startTime = Date.now();
isMove = false;
});
element.addEventListener("touchmove", function () {
isMove = true;
});
element.addEventListener("touchend", function () {
if(isMove) return ;
if((Date.now() - startTime) > maxDelay) return ;
//点击成功
//回调函数
callBack();
});
}
}
</script>
</head>
<body>
</body>
</html>
- Event
- originalEvent （原生事件） 是jquery 封装的事件。
- targetTouches 目标元素的所有当前触摸
- changedTouches 页面上最新更改的所有触摸
- touches 页面上的所有触摸
clientX、clientY 相对于当前屏幕的X或Y位置
pageX、pageY 相对于整体页面的X或Y位置
-
transitionEnd过渡结束事件。 -
animationEnd动画结束事件
移动端事件框架
例如：zepto 、touch.js
'swipe',
'swipeLeft',
'swipeRight',
'swipeUp',
'swipeDown',
'doubleTap',
'tap',
'singleTap',
'longTap'
都是由我们的原生touch事件封装的。
常见的移动端问题
什么是Retina 显示屏，带来了什么问题
retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个
在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍。
那么，前端的应对方案是：
设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2
//例如图片宽高为：200px*200px，那么写法如下
.css{width:100px;height:100px;background-size:100px 100px;}
其它元素的取值为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px
.css{font-size:20px}
百度禁止转码
通过百度手机打开网页时，百度可能会对你的网页进行转码，往你页面贴上它的广告，非常之恶心。不过我们可以通过这个meta标签来禁止它：<meta http-equiv="Cache-Control" content="no-siteapp" />
移动端手机号码识别（IOS）
在 iOS Safari （其他浏览器和Android均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如：
- 7位数字，形如：1234567
- 带括号及加号的数字，形如：(+86)123456789
- 双连接线的数字，形如：00-00-00111
- 11位数字，形如：13800138000
可能还有其他类型的数字也会被识别。我们可以通过如下的meta来关闭电话号码的自动识别：
<meta name="format-detection" content="telephone=no" />
开启电话功能
<a href="tel:123456">123456</a>
开启短信功能：
<a href="sms:123456">123456</a>
移动端邮箱识别（Android）
与电话号码的识别一样，在安卓上会对符合邮箱格式的字符串进行识别，我们可以通过如下的meta来关闭邮箱的自动识别：<meta content="email=no" name="format-detection" />
同样地，我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能：<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>
ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉
ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0，也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩。
{-webkit-tap-highlight-color: rgba(0,0,0,0;)}
webkit表单元素的默认外观怎么重置
.css{-webkit-appearance:none;}
禁止文本缩放
当移动设备横竖屏切换时，文本的大小会重新计算（或者在内嵌浏览器中设置字体的大小），进行相应的缩放，当我们不需要这种情况时，可以选择禁止：
html {
-webkit-text-size-adjust: 100%;
}
移动端禁止选中内容
如果你不想用户可以选中页面中的内容，那么你可以在css中禁掉：
.user-select-none {
-webkit-user-select: none;
｝
如何禁止保存或拷贝图像（IOS）
通常当你在手机或者pad上长按图像 img ，会弹出选项存储图像 或者拷贝图像，如果你不想让用户这么操作，那么你可以通过以下方法来禁止：
img { -webkit-touch-callout: none; }
摇一摇功能
HTML5 deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。
android 上去掉语音输入按钮
input::-webkit-input-speech-button {display: none}
移动端基础框架
zepto.js语法与jquery几乎一样，会jquery基本会zepto；
搭配
backbone underscore
http://daneden.github.io/animate.css/ 动画css
