Web前端 移动端
文章平均质量分 51
show_code
爱前端,爱dota,爱生活,为技术而痴狂,偏爱新技术的学习!
展开
-
ios系统微信小程序scroll-view划不动的问题
这段时间开发个微信小程序的点餐系统,因为只需要小程序版本,所以就用原生的小程序写了,过程中遇到了几个问题和坑,就总结一下,方便来后者。商品分类和商品列表的左右联动,像美团和饿了么那样的交互,点击某个分类滑动到对应的商品列表,随意滑动商品列表商品分类也会做对应的切换,我个人的实现方案如下:要用到scroll-view的to-view属性 每个商品的高度都是固定的,所以要开始计算好每个类目对应的商品列表的高度,在滑动商品的时候实时获取scrollTop,然后再让商品分类列表做对应的切换主要代码如下:原创 2021-02-04 17:26:55 · 5542 阅读 · 1 评论 -
使用Flexible.js实现手机端网页内容适配(rem适配法)
曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代,为了处理各终端的适配而乱了手脚。对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配?那么趁此Amfe阿里无线前端团队双11技术连载之际,用一个实战案例来告诉大家,手淘的H5页面是如何实现多终端适配的,希望这篇文章对大家在Mobile的世界转载 2018-01-31 15:18:32 · 5478 阅读 · 0 评论 -
移动端点击事件touch、tap、swipe等详解
本文整理了移动端常见的一些事件,包括原生支持的click、touch、tap、swipe事件,也有定义型的gesture手势事件(目前只是一个概念,使用的时候需封装模拟)使用到的是移动端的Chrome浏览器,本文只对该浏览器进行调试,其他浏览器暂未考虑到一、事件定义及分类1. click事件单击事件,类似于PC端的click,但在移动端中,连续click的触发有20原创 2018-01-11 19:55:28 · 33810 阅读 · 1 评论 -
html5在手机端调用摄像头的介绍以及新特性
camera" accept="image/*" multiple>,这句html大家应该都知道是用来在手机端或者pc端上传多张图片的情况下使用的,现在我们着重来分析下每个属性,以及新出的新特性的特点,后面会附上不同属性的demo测试。在 上面的HTML 的属性中,capture 的主要作用是捕获,对于移动端中就是开启摄像头了。如果没有这个属性就将会变成一个简单的上传文件按钮。ca原创 2017-05-19 11:20:03 · 16760 阅读 · 5 评论 -
在手机上百度地图定位的使用
其实本来是没啥好说的,只是百度地图对之前的api方法做了调整,所以这里让大家知道一下!首先引入如下的js:你的密钥">第三个js是用来纠正百度地图误差的,有用到!之前是用的navigator里面的geolocation,这个变量,然后去获取经纬度,现在不需要了,百度地图api直接封装了这个方法,使用如下:function initLocation(){ var geol原创 2017-05-16 16:17:24 · 1041 阅读 · 0 评论 -
移动端页面开发的“坑”
现在的前端开发者基本都要同时着手PC端页面和手机页面的开发工作,就目前的状况来看,手机页面的兼容性要比PC端更为复杂(当然主要是只在android端,大家懂的),而且有些样式在PC端页面上可能没什么,但是一旦到了手机页面,那就有可能是“大坑”,下面是本人自己开发手机页面过程中总结的一些问题,避免以后再次去犯。1.overflow-x这真的是一个大坑,一旦你在body或者html上用了这个属原创 2015-10-27 10:46:36 · 6085 阅读 · 0 评论 -
fastclick导致的iphone中select点击闪退的bug
在移动端页面开发工程中,为了解决iphone中点击事件300ms延迟的问题,一般不造轮子的做法就是引入fastclick.js,这个js库也是非常的好用,在页面初始化的最前面只需要加上如下代码即可(文章末尾会附上fastclick.js的下载链接,是改装版的):window.addEventListener('load', function() {FastClick.attach(docum原创 2015-12-16 12:42:13 · 5305 阅读 · 1 评论 -
移动端远程调测工具weinre使用
如今人们也越来越习惯在手机上浏览网页,而在手机上这些针对桌面浏览器设计的网页经常惨不忍睹。Web应用开发者需要针对手机进行界面的重新设计,但是手机上并没有称心如意的调试工具(如Firebug、web inspector),重新设计界面的工作往往事半功倍。本文介绍的调试工具Weinre 就是解决这一问题的优秀调试工具。Weinre是什么?Weinre代表We b In spector转载 2015-11-20 16:33:34 · 962 阅读 · 0 评论 -
js 个人整理的兼容性代码
因为各个浏览器厂商都有自己的坚持,所以就出现的JS的兼容,下面是个人整理的一些JS浏览器兼容代码,放在这里备忘吧: 1. document.addEventListener("mousewheel", function(event) {//FF if (event.wheelDelta > 0) { prev(); } else { next(); }原创 2015-08-18 16:19:11 · 1476 阅读 · 0 评论 -
前端性能优化指南(含移动端)
概述1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB5. Mobile侧因手机配置原因,除加载外渲染速度也是优化重点6. 基于第五点,要合理处理代码减少渲染损耗7. 基于第二转载 2015-04-27 21:10:08 · 2618 阅读 · 0 评论 -
html5支持的触摸键盘类型
HTML5可触摸键盘的类型翻译 2015-02-04 20:10:21 · 2217 阅读 · 0 评论 -
Swiper说明及API手册说明
最近使用Swipe.js,发现中文的资料很少,试着翻译了一下。能力有限,翻译难免错漏,欢迎指出,多谢!翻译自:http://www.idangero.us/sliders/swiper/api.phphttp://www.idangero.us/sliders/swiper/index.php一了解SwiperSwiper 是一款免费以及轻量级的移动设备触控滑块的框架,转载 2014-12-08 14:53:57 · 41199 阅读 · 2 评论