移动端web开发 浅析

Posted tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端web开发 浅析相关的知识,希望对你有一定的参考价值。

1. viewport

viewport在移动端承载网页的区域:具有默认格式

 

设置viewport属性,适配移动端设备

主流设置:

<meta name = ”viewport” content = ”width = device-width , initial-scale = 1.0 , user-scalable = 0”>

主流设置快捷键:meta: vp  tab

name = ”viewport”    viewport 设置入口格式

width = device-width  设置viewport宽度与移动设备宽度相同

initial-scale = 1.0     初始化缩放比例与pc端比例为:11

user-scalable = 0  是否允许用户自行缩放,可设置值:1,0或者yes,no    0为不允许

如果设置了用户不能自行缩放,那么下面两个参数没有意义

maximum-scale    用户最大缩放比,可设置大于0的数字

minimum-scale    用户最小缩放比,可设置大于0的数字

非主流设置:

参考taobao,判断屏幕尺寸,设置动态设置initial-scale

2.  base.css设置

reset css 重置标签的默认样式代码如下:

*,::before,::after {

    padding:0;  margin:0; 

    -webkit-tap-highlight-color: transparent;  移动端特有清除高亮

      -webkit-box-sizing: border-box;

    box-sizing: border-box;     用两种写法,兼容处理

}

body {

    font-size: 14px;

    color: #333;

    font-family: “MicroSoft YaHei” , “sans-serif”; 这是设备默认样式

}

ul,ol {

    list-style: none;

}

a {

    text-decoration: none;

    color: #333;

}

a: hover {

    color: #333;

}

input , textarea {

    border: none;    

    outline: none;      选中时没有边框

    resize: none;       不允许用户自行拉伸

       -webkit-appearance: none;     清除浏览器给input自带的样式,设置组件默认样式为空

}

.f_left {

    float: left;

}

.f_right {

    float: right;

}

.clearfix::before,.clearfix::after {     清除浮动

    content: ”.”;

    line-height: 0;

    height: 0;

    display: block;

    visibility: hidden;

    clear: both;

}

3. 设置动态页面的容器div  类名可设为:.layout

.layout {

          min-width: 300px;     适配小屏幕设备

          max-width: 640px;    设计图的基本格式

}

4. 部分CSS格式说明

移动端input格式设置,调用输入法时,enter键变为搜索键

        <form action="#">

            <input type="search"  placeholder="请输入"/>

        </form>

position: fixed 设置后定位失效,fixed是以window为基准的

要想实现效果,给fixed元素添加一个子盒子,给子盒子设置min-widhtmax-widthmargin: 0 auto即可居中;

5. 物理像素,在移动端图片1:1显示可能会出现失真

iPhone 42:1  四个物理像素显示1px   压缩图片一倍可显示正常

iPhone 6s plus:  3:1  九个物理像素显示1px    高清屏

 

6. 基本事件

touch事件    addEventListener()中添加事件

1touchstart事件:手指触摸屏幕触发事件

2touchmove事件:手指在屏幕上滑动时连续触发事件

3touchend事件:手指离开屏幕触发事件  chrome模拟器在模拟手机touchend时可能会丢失事件,最好将事件绑定在window

4touch的事件对象 event

dom.addEventListener (“touchstart” , function( event ) {

              console.log(event);

})

targetTouches页面上目标元素的所有当前触摸,元素外触摸点不包含

touches页面上所有的触摸点

changedTouches 页面上最新更改的所有触摸,在touchend事件中只记录changedTouchestargetTouchestouches都不会被记录

以上三个属性的数据类型都是数组

页面第一个触摸点信息touches[0]

dom.addEventListener (“touchstart” , function( event ) {

              console.log(event.touches[0]);

})

 

可以根据相关数据获取触摸点的位置

clientX:触摸点在浏览器视口中的X坐标

clientY:触摸点在浏览器视口中的Y坐标

pageX:触摸点在页面中的x坐标

pageY:触摸点在页面中的y坐标

screenX:触摸点在屏幕中的x坐标

screenY:触摸点在屏幕中的y坐标

过渡结束事件transitionEnd  webkitTransitionEnd过渡结束后触发

dom.addEventListener(“transitionEnd” , function( e ){  })

dom.addEventListener(“webkitTransitionEnd” , function( e ){  })

动画结束事件animationEnd  webkitAnimationEnd动画结束后触发

dom.addEventListener(“animationEnd” , function( e ){  })

dom.addEventListener(“webkitAnimationEnd” , function( e ){  })

click事件

click事件在移动端有300ms的延迟,在touchend事件之后发生,有300ms延迟所以用户体验并不好

测试代码如下:

    dom.addEventListener("touchstart", function () {

        console.time("click");    标记一个时间

        console.time("touchend")

    });

    dom.addEventListener("touchend", function () {

        console.timeEnd("touchend");    计算该标记执行间隔时间

    });

    dom.addEventListener("click", function () {

        console.timeEnd("click");    计算该标记执行间隔时间

})

封装一个tap事件让点击屏幕150ms内触发,且不触发touchmove事件:

tabb.tap = function (dom, callback) {

        if (dom && typeof dom == \'object\') {

            var isMove = false;

            var startTime = 0;

            dom.addEventListener(\'touchstart\', function (e) {

                startTime = Date.now();

            });

            dom.addEventListener(\'touchmove\', function (e) {

                isMove = true;

            });

            dom.addEventListener(\'touchend\', function (e) {

               if (!isMove && ( Date.now () – startTime ) < 150) {

                callback && callback(e);

               }

                isMove = false;          重置参数

                startTime = 0;

            });

    }

}

7.  zepto.js

使用语法与jQuery基本相同,可理解为轻量化、模块化的jQuery

使用引包增加功能:

1)包含五个模块  core  event  form  ajax  ie

    <script src="zepto/zepto.min.js"></script>

2)扩展性选择器模块

    <script src="zepto/selector.js"></script>

3)动画模块

    <script src="zepto/fx.js"></script>

4)移动端事件模块

<script src="zepto/touch.js"></script>

8.  响应式开发

媒体媒介media query 设置不同宽度下的样式:and之后一定要加空格

0-768px 移动端显示:   

@media screen and(空格)(max-width: 768px){

           .container{ width: 100%; background: red };

}

768px-992px 小屏设备显示:

@media screen and (min-width:768px) and (max-width: 992px){

           .container{ width: 100%; background: yellow};

}

992px-1200px 中屏设备显示:

@media screen and (min-width:992px) and (max-width: 1200px){

           .container{ width: 100%; background: green};

}

1200px- 大屏设备显示:

@media screen and(空格)(min-width: 1200px){

           .container{ width: 100%; background: black };

}

9.  bootstrap

英文网:http://getbootstrap.com/

中文网:http://www.bootcss.com/

10.  结构性选择器

①  “+”号选择器

div + div {}   .class + div {}

选择目标元素div或者.class的下一个元素div会被选中

“~”号选择器

div ~ div {}   .class ~ div {}

选择目标元素div或者.class后面的所有同级元素div会被选中

11.  向应式开发后台数据渲染underscore.js

 

以上是关于移动端web开发 浅析的主要内容,如果未能解决你的问题,请参考以下文章

移动端WEB开发,click,touch,tap事件浅析

移动端WEB开发,click,touch,tap事件浅析

移动端WEB开发,click,touch,tap事件浅析

移动端WEB开发,click,touch,tap事件浅析

H5缓存机制浅析-移动端Web加载性能优化干货

H5 缓存机制浅析 移动端 Web 加载性能优化