总结:
- 兼容问题:大部分手机浏览器webkit内核,主要是手机分辨率、操作系统的差异的兼容问题处理;
- 触摸事件的处理,手机虚拟键盘的处理
- 自适应布局:em,rem,vw的使用,以及根字体大小的响应式处理;
- 移动端动画特效处理
- 主流生态圈:小程序
- LBS:百度地图的API
- 移动开发库:zepto的掌握
- 一套前端开发框架:模块化,打包,压缩,缓存,发布,自动化测试fis;
视口
移动端:layout viewport布局视口、visual viewport视觉视口、ideal viewport理论视口;
视口规范:
//视口
<meta name="viewport" content="width=device-width,initial-scal=1.0,maximum-scale=1.0,user-scalable=no">
//最新,避免IE使用兼容模式
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
//双核,使用webkit内核(Safari,Chrome)
<meta name="renderer" content="webkit">
视口单位:
- vw:视口宽度百分比,1vw = 视口宽度1%
- vh:对口高度百分比
- vmin:选取vw和vh中最小的
- vmax:选取vw和vh中最大的
body和HTML:root设置font-size:
html{font-size=62.5%;} body{font-size:14px;font-size:1.4rem;} h1{font-size:24px;font-size:2.4rem}
JS控制HTML字体大小初始化,放在HEAD,使用REM单位;
媒体查询15px开始;Chrome的font-size小于12时候,以12计算;
谷歌基于webkit的fork web渲染引擎:blink引擎;
事件
-
手势事件(单个手指):touchstart => touchmove =>touchend/touchcancel
-
触摸事件(两个手指):gesturestart => gesturechange => gestureend
-
屏幕旋转事件:onorientationchange
-
检测触摸屏幕的手指何时改变方向:orientationchange
-
zepto.js的tap事件,是通过touch模拟的click事件,“捕获”BUG是否修正?
-
使用封装的tap事件代替click事件:click => dbclick(300ms判断时间),解决延迟问题
-
模拟
:hover
伪类:ontouchstart => onmouseover;ontouchend => onmouseout,移动端没有hover事件,只能JS增删class样式模拟;少用:hover
伪类,通过增删class修改样式; -
取消webkit浏览器点击链接或按钮的默认颜色变化:
-webkit-tap-highlight-color:rgba(0,0,0,0)
-
安卓click事件阻塞页面JS/CSS3动画效果:?
-
延时加载执行JS:安卓的onpagefinished事件会在JS脚本执行完后触发,或JQuery操作完DOM执行完
$(document).ready(function(){})
事件后才会渲染显示页面 -
滚动原生效果:
body{overflow:scroll|auto;-webkit-overflow-scrolling:touch;}
(ios 8+,android 4.0+)
样式
-
锁定viewport:
ontouchmove="event.preventDefault()"
,任何屏幕操作不移动用户界面,除键盘; -
白屏:css加载问题、首屏异步等待问题、内联JS阻塞渲染问题
-
清除transition动画过程中闪屏:
-webit-backface-visibility:hidden
-
input在IE10中的“x”清空符:
input:-ms-clear{display:none}
-
input属性:autocapitalize="on"开启自动大写;autocorrect="off"取消自动修正
-
去掉安卓语音输入按钮:
input::-webkit-input-speech-button{display:none}
-
不自动识别邮箱/电话:
<meta name="format-detection" content="email=no,phone=no">
-
手动申明电话/邮箱:
href="tel:<num>"
、href="sms:<e-mail>"
-
绝对定位输入框在输入召出键盘时,产生CSS移位:
-webkit-user-modify:read-write-plaintext-only
; -
多文字省略号显示:带
...
元素绝对定位模拟实现,多余文字overflow:hidden
;或display:-webkit-box、-webkit-line-clamp、-webkit-box-orient:vertical、text-overflow:ellipsis结合实现 -
阻止旋转屏幕自动调整字体大小:
html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6{-webkit-text-size-adjust:none;}
-
取消文字选取:
-webkit-user-select:none
-
禁止弹窗:
-webkit-touch-callout:none
-
书签保存显示自定义图标,而不是缩影图:
<link rel="apple-touch-startup-image" href="<uri>">
uri、url、urn的关系
-
“隐私模式”下,localstorage的权限问题:?;cache的开启与设置:?;manifest离线浏览缓存:?;
-
移动端元信息、数据检测判断:?
-
往返缓存问题(bfcache):浏览器后退页面不自动执行JS?