移动Web开发

作者: 对方不想理你并向你抛出一个异常 | 来源:发表于2017-09-10 14:40 被阅读0次

三种布局

有最大、最小宽度的百分比自适应布局
适用场景：门户网站首页，图片较多的首页。
百分比自适应布局
适用场景：信息文字较多的网页，内容较多网页。
全屏自适应布局
适用场景：单页面网页，移动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、onclick 200ms延时
　　移动端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

资料

知名网站的移动前端自适应解决方案和比较