移动端学习

最新推荐文章于 2023-07-15 20:41:30 发布

Corner1990

最新推荐文章于 2023-07-15 20:41:30 发布

阅读量464

点赞数

CC 4.0 BY-SA版权

分类专栏：移动端开发学习

本文链接：https://blog.youkuaiyun.com/weixin_33768153/article/details/53690176

移动端开发学习专栏收录该内容

3 篇文章

订阅专栏

本文介绍了移动端开发中的关键技术和实践，包括事件处理、触摸事件优化、页面适配方案、3D效果实现等内容。文中详细讲解了如何解决移动端特有的问题，如300ms延迟、屏幕旋转时的布局调整等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

移动端事件

第一天：

e.preventDefault();阻止默认事件

阻止掉document.touchstart事件，可以解决以下两个问题：
    1.阻止页面上的文字被选中  可以通过阻止冒泡，是某个元素里边的文字被选中
    2.阻止页面上的菜单系统

隐患：页面上的所有滚动条失效
ios上的橡皮筋效果可以通过阻止默认事件实现，

阻止冒泡

e.stopPropagation();

事件点透

PC端鼠标事件在移动端也可以使用，但是有300ms的延迟
1.在移动端PC事件邮300ms的延迟，
2.我们点击了以后，浏览器会记录点击下去的坐标，然后在300ms以后执行事件；
3.在300ms以后，在该坐标找到现在在这个未知的元素，执行事件

解决方法：

 1.阻止默认事件（部分安卓机型不支持）
 2.不在移动端使用鼠标事件，不用a标签做页面跳转

获取手指信息

e.thouchs //当前屏幕上的手指列表
e.tragetTouches //当前元素上的手指列表
e.changedThouches //触发当前事件的手指列表

第二天：

 简易的幻灯片

第三天：

移动端适配

(function(window){
            var html = document.querySelector('html');
            var width = html.getBoundingClientRect().width;
            html.style.fontSize = width / 16 + 'px';
})(window)

二.通过viewPort解决

1.页面宽度定死
2.动态设置viewPort 把可视宽度设置为320

width = [pixe_value | device-width],//viewPort的宽度
initial-scale = float_value, //初始化缩放比例
minimum-scale = float_value,//最小缩放比例
maximun-scale = float_value,//最大缩放比例
user-scalable = [yes | no] //是否允许缩放

    (function(window){
        //设置了viewPort 默认width=device-width 不设置viewPort width默认宽度是980
        var width = window.screen.width;//获取屏幕宽度 
        var targetW = 320; //想要固定的宽度
        var scale =  width / targetW; //得到像素比 
        var meta = document.createElement('meta');
        meta.setAttribute('name','viewport');
        // 使用像素比设置viewPort 缩放比例
        meta.setAttribute('content',
        'width=device-width,user-scalable=no,initial-scale='+scale+'minimum-scale='+scale+'maximum-scale='+scale);
        document.heade.appendChild(meta);
    })(window)

三。横竖屏切换

1.rem 横竖屏切换

(function(window){
setRem();
function setRem(){//设置html字体大小
var html = document.querySelector(‘html’);
var width = html.getBoundingClientRect().width;
html.style.fontSize = width / 16 + ‘px’;
}
// orientationchage 横竖屏切换事件
window.addEventListener(‘orientationchange’,function(){
setRem();
})
})(window)

2.viewPort 横竖屏切换

在竖屏的时候 window.orientation = 90 || -90;
在横屏屏的时候 window.orientation = 0 || 180;

var width = (window.orientation == 90||window.orientation == -90)? window.screen.height: window.screen.width
var targetW = 320; 
var scale = width / targetW;
var meta = document.createElement('meta');
alert(width);
meta.setAttribute('name', 'viewport');
meta.setAttribute('content', "user-scalable=no,initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale);
document.head.appendChild(meta);

window.addEventListener(
    "orientationchange", 
    function() {
        setTimeout(
            function() {
                window.location.href = window.location.href;
            },
            1000
        );
    }
);

四.取图大小

注：如果说在table里边给某个元素设置positive定位的话，在IE下屏幕滚动的时候会有卡屏的现象
// window.devicePixelRatio 像素比
// 用几个像素的大小显示一像素的内容
// 设计图的宽度最好都在750以上

五.css3D

常用属性
rotate
rotateX
rotateY
rotateZ
translate
perspective： 300px; 设置景深。
Math.tan(弧度) 正切 =》对边/领边; 弧度=角度*PI/180;
邻边 =》对边*正切
“`

六。手写3d桌面整理

一.HTML结构

1.一个包裹层
2.页面包含一个头部(header)
3.一个内容部分 (list)

子列表(li>p*3>span*4)
一个底部

二.CSS部分

使用百分比布局
1.布局代码，省略
2.3d显示代码

.list 设置perspective 属性创建一个3d显示空间
.item 设置浮动设置position:relative; 显示每一列设置transform-style: preserve-3d;设置过度为3d
p设置position:absolute; 一列布局的包裹层旋转角度使用js计算后设置
span 设置display为block 快100% 高根据行数这是行/h*100%

三.js部分

1.禁止默认事件
2.设置布局属性 rotateZ (旋转外角)

/*设置旋转*/
var n = 3;//有几个面
var deg = 360/n;需要旋转的角度(外角)
var z = (Math.tan( (180-deg)/2*Math.PI/180)*元素宽/2).toFixed(4);
var style = document.querySelector('#style');
str = '';
for(var i = 1 ;i < .item.length; i++){
     str+=' .item p:nth-of-type('+(i)+'){-webkit-transform: rotateY('+(i-1)*deg+'deg) translateZ('+z+'px);transform: rotateY('+(i-1)*deg+'deg) translateZ('+z+'px); transform-origin:center center '+0+'px;}';
}
style.innerHTML += str;
<!-- 注：为了解决iOS小旋转基点的问题 在.item上设置z轴后移z像素 子元素p设置z轴前移z像素 -->

3.设置touch事件

var item = document.querySelectorAll('.item');
//给每个item设置rotate 方便后期获取  
    for(var i = 0; i<item.length;i++){
            cssTransform(item[i],"translateZ",-z);
            cssTransform(item[i],"rotateY",0);
        }
    var startX =0;//手指初始屏幕左边
    var satrtPointe=0;//初始旋转角度

    list.addEventListener('touchstart',function(e){
        for(var i=0;i<item.length;i++){
            item[i].style.transition="none";
        }
        var touch = e.changedTouches[0];
        startX = touch.pageX;
        satrtPointe=cssTransform(item[0],"rotateY");
    });

    list.addEventListener('touchmove',function(e){
        var touch = e.changedTouches[0];
        var dis = startX - touch.pageX; 
        nowPointe = dis/htmlReact.width*deg;
        for(var i=0;i<item.length;i++){
            cssTransform(item[i],"rotateY",satrtPointe-nowPointe);
        }
    });

    list.addEventListener('touchend',function(e){
        //得到当前旋转角度
        var nowDeg = cssTransform(item[0],"rotateY");
        //通过四舍五入判断得到旋转的系数
        var now = (-Math.round(nowDeg/deg));
        //now = now < 0? 3+now:now; 系数*旋转教的(deg)等于最终的位置
        console.log(now,-now*deg,nowDeg);

        for(var i = 0; i<item.length;i++){
            item[i].style.transition = "transform .5s";
            cssTransform(item[i],"rotateY",-now*deg);
        }
    });
    // cssTransform兼容写法
    function cssTransform(el,attr,val) {
        if(!el.transform){
            el.transform = {};
        }
        if(arguments.length>2) {
            el.transform[attr] = val;
            var sVal = "";
            for(var s in el.transform){
                switch(s) {
                    case "rotate":
                    case "rotateX":
                    case "rotateY":
                    case "rotateZ":     
                    case "skewX":
                    case "skewY":
                        sVal +=s+"("+el.transform[s]+"deg) ";
                        break;
                    case "translateX":
                    case "translateY":
                    case "translateZ":
                        sVal +=s+"("+el.transform[s]+"px) ";
                        break;
                    case "scaleX":
                    case "scaleY":
                    case "scale":
                        sVal +=s+"("+el.transform[s]+") ";
                        break;  
                }
                el.style.transform = sVal;
                el.style.WebkitTransform = sVal;
            }
        } else {
            val  = el.transform[attr];
            if(typeof val == "undefined" ) {
                if(attr == "scale" || attr == "scaleX" || attr == "scaleY"  ) {
                    val = 1;
                } else {
                    val = 0;
                }
            }
            return val;
        }
    }