移动端的前端问题

这里主要回顾和记录之前在app项目中所碰到的一些问题,以及需要注意的地方。如有错误请指出,虚心求教!

首先我们是采用phonegap(cordova) 调用底层插件实现ios,android的一套兼容。

1.

作为移动端适配问题就一个重点,ios,android的dpr不同展现出现的内容也不同,所以采用了手淘Flexible的方案,使用rem进行适配。

;(function(win, lib) {
    var doc = win.document;
    var docEl = doc.documentElement;
    var metaEl = doc.querySelector(‘meta[name="viewport"]‘);
    var flexibleEl = doc.querySelector(‘meta[name="flexible"]‘);
    var dpr = 0;
    var scale = 0;
    var tid;
    var flexible = lib.flexible || (lib.flexible = {});

    if (metaEl) {
        console.warn(‘将根据已有的meta标签来设置缩放比例‘);
        var match = metaEl.getAttribute(‘content‘).match(/initial\-scale=([\d\.]+)/);
        if (match) {
            scale = parseFloat(match[1]);
            dpr = parseInt(1 / scale);
        }
    } else if (flexibleEl) {
        var content = flexibleEl.getAttribute(‘content‘);
        if (content) {
            var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
            var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
            if (initialDpr) {
                dpr = parseFloat(initialDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));
            }
            if (maximumDpr) {
                dpr = parseFloat(maximumDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));
            }
        }
    }

    if (!dpr && !scale) {
        var isAndroid = win.navigator.appVersion.match(/android/gi);
        var isIPhone = win.navigator.appVersion.match(/iphone/gi);
        var devicePixelRatio = win.devicePixelRatio;
        if (isIPhone) {
            // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
                dpr = 3;
            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
                dpr = 2;
            } else {
                dpr = 1;
            }
        } else {
            // 其他设备下,仍旧使用1倍的方案
            dpr = 1;
        }
        scale = 1 / dpr;
    }

    docEl.setAttribute(‘data-dpr‘, dpr);
    if (!metaEl) {
        metaEl = doc.createElement(‘meta‘);
        metaEl.setAttribute(‘name‘, ‘viewport‘);
        metaEl.setAttribute(‘content‘, ‘initial-scale=‘ + scale + ‘, maximum-scale=‘ + scale + ‘, minimum-scale=‘ + scale + ‘, user-scalable=no‘);
        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(metaEl);
        } else {
            var wrap = doc.createElement(‘div‘);
            wrap.appendChild(metaEl);
            doc.write(wrap.innerHTML);
        }
    }

    function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = 540 * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + ‘px‘;
        flexible.rem = win.rem = rem;
    }

    win.addEventListener(‘resize‘, function() {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener(‘pageshow‘, function(e) {
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    if (doc.readyState === ‘complete‘) {
        doc.body.style.fontSize = 12 * dpr + ‘px‘;
    } else {
        doc.addEventListener(‘DOMContentLoaded‘, function(e) {
            doc.body.style.fontSize = 12 * dpr + ‘px‘;
        }, false);
    }

    refreshRem();

    flexible.dpr = win.dpr = dpr;
    flexible.refreshRem = refreshRem;
    flexible.rem2px = function(d) {
        var val = parseFloat(d) * this.rem;
        if (typeof d === ‘string‘ && d.match(/rem$/)) {
            val += ‘px‘;
        }
        return val;
    }
    flexible.px2rem = function(d) {
        var val = parseFloat(d) / this.rem;
        if (typeof d === ‘string‘ && d.match(/px$/)) {
            val += ‘rem‘;
        }
        return val;
    }

})(window, window[‘lib‘] || (window[‘lib‘] = {}));

下面是引用网上找的源码,经过一系列的计算后,会在html根节点处添加dpr和font-size。

css的写法:都采用rem,在设计图是ip6为基准时,将尺寸/75。

2.

在项目过程中有时候需要判断设备的类型:

var browser = {
    versions: function() {
        var u = navigator.userAgent,
            app = navigator.appVersion;
        return { //移动终端浏览器版本信息
            trident: u.indexOf(‘Trident‘) > -1, //IE内核
            presto: u.indexOf(‘Presto‘) > -1, //opera内核
            webKit: u.indexOf(‘AppleWebKit‘) > -1, //苹果、谷歌内核
            gecko: u.indexOf(‘Gecko‘) > -1 && u.indexOf(‘KHTML‘) == -1, //火狐内核
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
            android: u.indexOf(‘Android‘) > -1 || u.indexOf(‘Linux‘) > -1, //android终端或uc浏览器
            iPhone: u.indexOf(‘iPhone‘) > -1, //是否为iPhone或者QQHD浏览器
            iPad: u.indexOf(‘iPad‘) > -1, //是否iPad
            webApp: u.indexOf(‘Safari‘) == -1 //是否web应该程序,没有头部与底部
        };
    }(),
    language: (navigator.browserLanguage || navigator.language).toLowerCase()
}

navigator对象属于BOM ,用于识别客户端浏览器的事实标准,每个浏览器都有一套自己的属性。

navigator.userAgent:浏览器的用户代理字符串。

navigator.appVersion:浏览器的版本信息。

3.

1).由于生成二维码的格式是base64。所以当我们要展示二维码时需要在img中设置格式

<img src="data:image/png;base64,‘ + e + ‘" id=""/>

2).密码提交在后台前都需要先md5,最好进行加密一下。

3).在移动端会存在跨域的问题。

采用CORS在后台程序中,设置Access-Control-Allow-Origin头部设置了通配符,在进行权限限制。

4.

使用iscroll4.js进行拉上刷新下拉加载,在滑动区域动态添加多条数据时候,滑动该区域会出现卡顿,抖动情况。

我的解决方法是在每次动态添加完数据改变dom后 就使用wrapper.refresh() 重新计算滑动区域的高度。

还有一种情况:

就是在当手指从滑动区域一直拖到外部,会出现卡住的情况,不会回弹。

解决方法实在iscroll.js的490行加个判断,(如果有问题请指出,有点忘了还改了什么地方)

if(point.pageY<0 || point.pageY>document.body.clientHeight){
            this.options.onScrollEnd();
            this._end(e);
            this._startAni(e);
            that._unbind(MOVE_EV, window);
        }else{
        }

5.

之前做了一个大转盘的活动页,奖品的信息,图片通过请求获取,奖品图片放在大转盘的每一快区域,是否中奖或者中哪个奖由后台接口返回,再控制大转盘的停留位置。

我的思路是将每个奖品的相同属性的值放入数组当中。获取到中单奖品的id后,获取它在数组中的索引,通过索引控制旋转的角度。

在过程中碰到几个问题 1.在画布上放图片  2.图片无法显示全部。

1.在画布上放图片需用到canvas的方法:drawImage() ,它能在画布上绘制图像、画布或视频。

2.图片无法显示全部的原因在于,当图片没有完全加载完前就进行描绘,导致了显示不出,所以需要在图片完全加载完后执行描绘。

function draw() {
    var canvas = document.getElementById("wheelcanvas");
    canvas.width = 640;
    canvas.height = 640;
    if(canvas.getContext) {
        //根据奖品个数计算圆周角度
        var arc = Math.PI / (turnplate.restaraunts.length / 2);
        var ctx = canvas.getContext("2d");
        //在给定矩形内清空一个矩形
        ctx.clearRect(0, 0, 640, 640);
        ctx.strokeStyle = "#FFBE04";
        //ctx.font = ‘30px Microsoft YaHei‘;
        $.each(turnplate.Imgurl, function(key, value) {
            var img = new Image();
            img.src = value;
            img.onload = function() { //让图片加载完毕后执行描绘
                drawTrails()
            }
            function drawTrails() {
                var angle = turnplate.startAngle + key * arc;
                ctx.fillStyle = turnplate.colors[key];
                ctx.beginPath();
                //arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线(用于创建圆或部分圆)
                ctx.arc(320, 320, turnplate.outsideRadius, angle, angle + arc, false);
                ctx.arc(320, 320, turnplate.insideRadius, angle + arc, angle, true);
                ctx.stroke();
                ctx.fill();
                //锁画布(为了保存之前的画布状态)
                ctx.save();

                //ctx.fillStyle = "#FFFFFF"; //字体颜色
                //var text = turnplate.restaraunts[i];
                //var line_height = 17; //字体行距
                //translate方法重新映射画布上的 (0,0) 位置
                ctx.translate(320 + Math.cos(angle + arc / 2) * turnplate.textRadius, 320 + Math.sin(angle + arc / 2) * turnplate.textRadius);
                //rotate方法旋转当前的绘图
                ctx.rotate(angle + arc / 2 + Math.PI / 2);
                ctx.drawImage(img, -35, -20, 80, 80) //设置图片的位置及大小
                ctx.restore();

            }
        });
    }
}
时间: 2024-10-28 17:42:13

移动端的前端问题的相关文章

移动端WEB前端开发最佳实践

移动端WEB前端开发最佳实践 Safari,Android Browser,Chrome都是以WebKit为核心的 移动设备和PC之间的页面现实存在差异(Safari中定义了viewport) 在移动设备和桌面端WEB前端开发中,事件绑定存在差异(移动触点) 页面控件设计存差异(点触不灵敏,虚拟键盘弹出框) 移动设备的网络带宽普遍比PC慢,移动页面要设置更简洁 PC页面兼容移动设备 使用流式布局 借助CSS Media queries(媒体查询)技术 使用合适的图片显示兼容方案 保持页面简洁,不

移动端浏览器前端优化

相对于桌面端浏览器,移动端Web浏览器上有一些较为明显的特点:设备屏幕较小.新特性兼容性较好.支持一些较新的HTML5和CSS3特性.需要与Native应用交互等.但移动端浏览器可用的CPU计算资源和网络资源极为有限,因此要做好移动端Web上的优化往往需要做更多的事情.首先,在移动端Web的前端页面渲染中,桌面浏览器端上的优化规则同样适用,此外针对移动端也要做一些极致的优化来达到更好的效果.需要注意的是,并不是移动端的优化原则在桌面浏览器端就不适用,而是由于兼容性和差异性的原因,一些优化原则在移

针对移动端的前端工作流

在移动端项目的开发中,我们会遇到诸如移动端技术选型.移动端适配.预处理器语言的使用规范和编译.各种繁琐的工作(压缩.合并.内联.雪碧图.CSS前缀--)等问题,在一遍又一遍的重复劳动中,我们需要一个能够结合最佳实践的项目初始文件,本套工作流就是以这个目的进行构建,旨在提高移动端项目开发效率. 这套工作流与其叫工作流这么高大上的名字,我更愿意叫它基础库.如它的名字一样,它就是用来作为项目的基础,在良好的基础上开发的项目,才像是站在巨人的肩膀上,才能保证项目的质量与效率. 此外因为是针对移动端(尤其

手机移动端web前端常见问题整理

移动端常见问题及解决方案 一.meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 <meta name="format-detection&

从前端到“钱”端,前端程序员的出路在何方

过去十年,是前端觉醒的十年. 前端这个行业很年轻,更早时候其实是有前端工作但是没有前端岗位.大家觉得这个东西程序员做也行,设计师做也行.前端工作一直存在,但是没有人认为它是一个独立的工种和岗位,也没有人去发展它的工程体系,更没有人去找它的核心价值.所以如果说过去十年前端是什么样的十年,我认为是觉醒的十年. 在过去十年中,前端技术的发展大致经历了三个阶段: 首先是青铜时代,就是 2008 年前后那段时间,前端圈子里流行的是各种特效,比如鼠标跟随.Flash,当时觉得非常炫酷,今天看来有点 low.

移动端Web前端注解

一,布局 移动端的整体布局一般来说可以分为上中下三个部分,分别为 header.main.footer,其中header.footer 是固定高度,分别固定在页面顶部和页面底部,而 main 是占据页面其余位置,并且可以滚动. 页面布局如下: <body> <div class="header"></div> <div class="main"></div> <div class="foot

移动端开发——前端开发入门

一.viewport的概念 通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域,但viewport又不局限于浏览器可视区域的大小,它可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小.移动设备上的viewport分为layout viewport . visual viewport 和 ideal viewport 三类,其中的 ideal viewport 是最适

移动端页面前端设计随笔整理

1.安卓机部分浏览器不支持这种背景css的写法: 1 background:#fff url(lunch.png) center bottom /86.5% no-repeat; 要写成: 1 background:#fff url(lunch.png) center bottom no-repeat; 2 background-size:86.5%; 2.使用百分比布局页面的时候,从html到body到.....一级一级的每一级都要设置%,比如 1 html{height:100%;} 2 b

网狐数据库储存过程==到服务端==到前端的修改过程

原文地址:https://www.cnblogs.com/linhongquan/p/9763887.html