移动端网页注意事项 (6)

整个页面用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布局

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zggfyd.html