H5前端与移动开发知识总结

前端与移动开发知识|前端开发者

一、meta标签

1、控制显示区域各种属性:

<meta content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″ name=”viewport”>
width:viewport的宽度
height:viewport的高度
initial-scale:初始的缩放比例
minimum-scale:允许用户缩放到的最小比例
maximum-scale:允许用户缩放到的最大比例
user-scalable:用户是否可以手动缩放

2、IOS中Safari允许全屏浏览:

<meta content=”yes” name=”apple-mobile-web-app-capable”>

3、IOS中Safari顶端状态条样式:

<meta content=”black” name=”apple-mobile-web-app-status-bar-style”>

4、IOS中Safari设置保存到桌面图标

需要在网站的根目录下存放favicon图标,防止404请求(使用fiddler可以监听到)
<link rel=”apple-touch-icon” href=”icon.png”>

5、忽略将页面中的数字识别为电话号码

一般情况下,IOS和Android系统都会默认某长度内的数字为电话号码

二、取消表单元素在点击态时的边框以及半透明灰色背景

css 代码片段

三、移除原生控件样式

css 代码片段

四、使用rem来做响应式开发

针对不同的设备,对页面rem做不同缩放

sass 代码片段

五、定义字体

如无特殊需求,手机端无需定义中文字体,使用系统默认;
英文字体和数字字体可使用 Helvetica ,三种系统(ios、android、winphone)都支持。
css 代码片段

六、flex布局兼容性写法

使用 Sass mixin实现flex布局

sass 代码片段

七、移动端touch事件

当用户手指放在移动设备在屏幕上滑动会触发的touch事件
touchstart:当手指触碰屏幕时候发生。不管当前有多少只手指
touchmove:当手指在屏幕上滑动时连续触发。通常我们再滑屏页面,会调用event的preventDefault()可以阻止默认情况的发生:阻止页面滚动
touchend:当手指离开屏幕时触发
touchcancel:系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框,此时会触发该事件,这个事件比较少用

八、click产生200-300 ms的延迟响应

页面js捕获click事件的回调函数处理,需要300ms后才生效
解决方案:
1、fastclick可以解决在手机上点击事件的300ms延迟
2、zepto的touch模块,tap事件也是为了解决在click的延迟问题

九、按钮active态

在iOS系统的移动设备中,需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态
javascript 代码片段

前端与移动开发知识|网站前端开发

https://www.rokub.com

» 本文来自:前端开发者 » 《H5前端与移动开发知识总结》
» 本文链接地址:https://www.rokub.com/2885.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!