[HTML] H5移动端知识点总结

  一、meta标签

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

　　metacontent=width=device-width， initial-scale=1.0， maximum-scale=1.0， user-scalable=0name=viewport 　　width：viewport的宽度 　　height：viewport的高度 　　initial-scale：初始的缩放比例 　　minimum-scale：允许用户缩放到的最小比例 　　maximum-scale：允许用户缩放到的最大比例 　　user-scalable：用户是否可以手动缩放 　　2、IOS中Safari允许全屏浏览： 　　meta content=yesname=apple-mobile-web-app-capable 　　3、IOS中Safari顶端状态条样式： 　　meta content=blackname=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 代码片段 　　input， textarea， button， a 　　运行代码复制代码保存代码提示：1、可先改代码再运行 2、支持Zen coding 3、当代码框处于激活状态下按 CTRL+F11 键可全屏! 　　三、移除原生控件样式 　　css 代码片段 　　input，button，textarea  　　运行代码复制代码保存代码提示：1、可先改代码再运行 2、支持Zen coding 3、当代码框处于激活状态下按 CTRL+F11 键可全屏! 　　四、使用rem来做响应式开发 　　针对不同的设备，对页面rem做不同缩放 　　sass 代码片段 　　html  　　运行代码复制代码保存代码提示：1、可先改代码再运行 2、支持Zen coding 3、当代码框处于激活状态下按 CTRL+F11 键可全屏! 　　五、定义字体 　　如无特殊需求，手机端无需定义中文字体，使用系统默认； 　　英文字体和数字字体可使用 Helvetica ，三种系统（ios、android、winphone）都支持。 　　css 代码片段 　　body 　　运行代码复制代码保存代码提示：1、可先改代码再运行 2、支持Zen coding 3、当代码框处于激活状态下按 CTRL+F11 键可全屏! 　　六、flex布局兼容性写法 　　使用 Sass mixin实现flex布局 　　sass 代码片段 　　 display-flex()  　　运行代码复制代码保存代码提示：1、可先改代码再运行 2、支持Zen coding 3、当代码框处于激活状态下按 CTRL+F11 键可全屏! 　　七、移动端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 代码片段 　　document.body.addEventListener('touchstart'， function () );   　　运行代码复制代码保存代码提示：1、可先改代码再运行 2、支持Zen coding 3、当代码框处于激活状态下按 CTRL+F11 键可全屏! 每天一节直播课，美女老师带你玩转前端，+群434623999