整个页面用rem或者百分比布局
23、消除transition闪屏 .css{ /*设置内嵌的元素在 3D 空间如何呈现:保留 3D*/ -webkit-transform-style: preserve-3d; /*(设置进行转换的元素的背面在面对用户时是否可见:隐藏)*/ -webkit-backface-visibility: hidden; } 24、开启硬件加速 .css { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }参考《 用CSS开启硬件加速来提高网站性能 》
25、取消input在ios下,输入的时候英文首字母的默认大写 <input autocapitalize="off" autocorrect="off" /> 26、android 上去掉语音输入按钮 input::-webkit-input-speech-button {display: none} 27、android 2.3 的一些bug
@-webkit-keyframes 需要以0%开始100%结束,0%的百分号不能去掉
after 和 before 伪类无法使用动画 animation
border-radius 不支持%单位
translate 百分比的写法和 scale 在一起会导致失效,例如 -webkit-transform: translate(-50%,-50%) scale(-0.5, 1)
28、android 4.x 的一些bug
三星 Galaxy S4中自带浏览器不支持 border-radius 缩写
同时设置 border-radius 和背景色的时候,背景色会溢出到圆角以外部分
部分手机(如三星),a链接支持鼠标 :visited 事件,也就是说链接访问后文字变为紫色
android无法同时播放多音频audio
参考《 border-radius 移动之伤 》
29、设计高性能CSS3动画的几个要素
尽可能地使用合成属性 transform 和 opacity 来设计CSS3动画,不使用 position 的left和top来定位
利用 translate3D 开启GPU加速
参考《 High Performance Animations 》
29、fixed 属性 bug
ios下fixed元素容易定位出错,软键盘弹出时,影响fixed元素定位
android下fixed表现要比iOS更好,软键盘弹出时,不会影响fixed元素定位
ios4下不支持position:fixed
解决方案
可用isroll.js,暂无完美方案
《 移动端web页面使用position:fixed问题总结 》
《 使用iScroll.js解决ios4下不支持position:fixed的问题 》
30、如何阻止windows Phone的默认触摸事件winphone下默认触摸事件事件使用e.preventDefault是无效的
目前解决方法是使用样式来禁用
html{-ms-touch-action: none;}/* 禁止winphone默认触摸事件 */《 Windows phone 8 touch support 》
31、播放视频如何不自动全屏 <!-- 1.目前只有ios7+、winphone8+支持自动播放 2.支持Airplay的设备(如:音箱、Apple TV)播放 x-webkit-airplay="true" 3.播放视频不全屏,ios7+、winphone8+支持,部分android4+支持(含华为、小米、魅族) webkit-playsinline="true" --> <video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"></video> 32、微信内置浏览器里面多行截断有时生效有时无效
解决方案:
暂时无解 ,应该是微信bug
折中方案:
为段落设置好高度和 overflow:hidden ,保证截断没生效时不会导致文档混乱
33、部分版本浏览器内 margin 不生效
解决方案:
尽量使用 padding
三、常用的移动端框架 1、zepto.js语法与jquery几乎一样,会jquery基本会zepto~
官网:
中文(非官网):
常使用的扩展模块:
浏览器检测: https://github.com/madrobby/zepto/blob/master/src/detect.js
tap事件: https://github.com/madrobby/zepto/blob/master/src/touch.js
2、iscroll.js解决页面不支持弹性滚动,不支持fixed引起的问题~
实现下拉刷新,滑屏,缩放等功能~
官网:
3、underscore.js该库提供了一整套函数式编程的实用功能,但是没有扩展任何JavaScript内置对象。
官网:
4、滑屏框架适合上下滑屏、左右滑屏等滑屏切换页面的效果
slip.js
iSlider.js
fullpage.js
swiper.js
5、flex布局