移动页面开发小结

开发测试

移动端开发的时候,可以使用chrome自带的emulated device进行快速高效的开发,调试。但毕竟不是真机,有些情况覆盖不到。

针对手机测试

• 因为我的手机是Android,通过开启usb调试,打开chrome的chrome://inspect/#devices 即可
• 对于ios,安装xcode,开启simulator即可。
• 上面两种方式都是基于browser,可断点调试,针对非browser的应用测试,例如典型的WeChat,可以借助于Vconsole,以log的方式查看在开发时需要的相关信息。

说明 我在使用中遇到的问题以及解决的方式,对于android,在真机测试过程中,因为我司项目对静态文件配有独立的二级域名,平时开发中对于js,css等使用真实线上全路径(host映射,本地代理服务的方式),导致手机测试中访问不到。通过charles代理进行访问即可--->原理是同一局域网下,手机使用charles设置的代理服务器进行访问;对于ios,simulator开启后可以放到application,并且保留到dock中,方便下次使用时,快速启动。安装时注意系统版本,xcode版本和系统存在对应关系,为了弄这个,系统升了一次级,注意不是更新。我本机安装的对应版本(osx10.12<==>xcode8.3.3)。

charles代理开启和端口设置,手机需要配上相应的ip和端口即可

simulator需要放到application中,方便下次使用

布局

布局基于rem,rem依据html的font-size值，其只是一个基数，元素的像素大小并不会因为这个基数有变化,我司设计稿以iphone6为基准,*2稿750×1334,动态调整font-size适配不同手机。

var _rem = width / baseSize * baseFontSize;
docEl.style.fontSize = _rem / defaultFontSize * 100 + '%';

踩坑之旅

图片保存

图片是存储在单独的静态服务器,无法让后端处理，页面中考虑使用download,但是需要做兼容性处理,基于我现在是手机浏览页面的考虑,不支持时通过提示说明长按保存的方式。关于download的兼容性说明

Works in Chrome, Edge, Fire。fox, Opera and latest Android 4.4+ browsers, and not in Internet Explorer and Safari。

额外说一句,如果能基于server端的设置,就不会有兼容性问题,参考如下方式

Content-Disposition: attachment; filename=ProposedFileName.txt;

1像素

缩放比为1时,布局视口等于理想视口,但是此时会出现1像素问题,因为布局视口是375px,但是dpr为2,1px其实是2物理像素。
通过调整initial-scale=0.5,虽然此时布局视口大于理想视口,但是此时1px,是真实的1px==1物理像素。

样式

用父级别字体大小，手机上显示会有延迟。需要将字体和颜色直接设置到目标元素上。

点击穿透

点击悬浮下拉列表,再次点击时关闭,此时会触发下面元素a链接的跳转事件,通过使用transition,0.5s的方式解决。当然还有其它方式,例如使用封装过的tap事件,fastclick等。

无痕模式(ios)

项目中有使用到localStorage,但是报错,通过Safari的simulator console可以看到

QuotaExceededError: Dom exception 

在ios模拟器上测试结果如下

Cookies.set('name', 'jsdt');
var a=Cookies.get('name');
alert(a); // 功能ok

localStorage.setItem('model',1);
var b=localStorage.getItem('model')
alert(b); // error

所以决定对localStorage进行异常处理,在catch中使用cookie,来替代localStorage的功能。我发现天猫首页会有营销弹窗,关两次才能关掉,但是ios无痕模式始终关不掉,为什么没有使用cookie? 此时站在产品的角度想,既然你无痕了,那么你每次进来都是和初次进来一样,并不会记录你的任何操作,还是有一定道理的。

iscroll和fastclick冲突

fastclick的click事件在android的浏览器和pc浏览器模拟器上使用没问题,但是ios上失效。看了一下iscroll源码其本身支持tap事件,重要逻辑如下

    //1008 eventType(this.wrapper, 'touchstart', this);  注册事件监听器
    //1659 handleEvent()   //分发事件
    //248  me.tap    //触发自定义tap事件

iscroll内部自定义了tap事件,通过handleEvent,调用在touchend之后的tap方法。借助iscroll的tap事件解决兼容性问题。后来想了想,其实不用iscroll也行,直接overflow scroll也行,只不过效果没那么酷炫。

总结

其实遇到的问题不止上面那些,列出一些我认为重要的,总结回顾加深一下印象,防止下次再遇到类似问题,同时希望能给到大家借鉴意义。因为做的是wap站首页,还原度要求100%,在追求1px还原度的时候,仔细思考会发现1px误差下面有很多原理性的东西,所以对自己要求高,能力提升也会快一些。如果心里想的只是为了完成任务,对个人来说意义就不大了。