移动端页面开发总结[摘录]
1.浏览窗口宽带等于设备宽度
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
2.禁止数字识别为电话号码
<meta name="format-detection" content="telephone=no" />
3.禁止安卓识别邮箱
<meta name="format-detection" content="email=no" />
4.移动端页面基本模板
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title>title</title> <link rel="stylesheet" href="style.css"> </head> <body> content </body> </html>
其他:
1.取消input在ios下,输入的时候英文首字母的默认大写
<input autocapitalize="off" autocorrect="off" />
2.android 上去掉语音输入按钮
input::-webkit-input-speech-button {display: none}
3.屏幕旋转的事件和样式
window.onorientationchange = function(){ switch(window.orientation){ case -90: case 90: alert("横屏:" + window.orientation); case 0: case 180: alert("竖屏:" + window.orientation); break; } }
//竖屏时使用的样式 @media all and (orientation:portrait) { .css{} } //横屏时使用的样式 @media all and (orientation:landscape) { .css{} }
4.audio元素和video元素在ios和andriod中无法自动播放
$('html').one('touchstart',function(){ audio.play() })
其他相关:
1.ios7+支持自动播放
2.支持Airplay的设备(如:音箱、Apple TV)播放
x-webkit-airplay="true"
3.播放视频不全屏
webkit-playsinline="true"
以上代码用法如下
<video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"></video>
5.摇一摇功能
//事件监听 if ((window.DeviceMotionEvent) { window.addEventListener('devicemotion', deviceMotionHandler, false); } else { document.getElementById("dmEvent").innerHTML = "Not supported on your device." } //捕捉重力加速度 var acceleration = eventData.accelerationIncludingGravity; //摇一摇demo var SHAKE_THRESHOLD = 800; var last_update = 0; var x, y, z, last_x, last_y, last_z; function deviceMotionHandler(eventData) { var acceleration =eventData.accelerationIncludingGravity; var curTime = new Date().getTime(); if ((curTime - last_update)> 300) { var diffTime = curTime -last_update; last_update = curTime; x = acceleration.x; y = acceleration.y; z = acceleration.z; var speed = Math.abs(x +y + z - last_x - last_y - last_z) / diffTime * 10000; if (speed > SHAKE_THRESHOLD) { alert("shaked!"); } last_x = x; last_y = y; last_z = z; } }
参考:http://segmentfault.com/a/1190000003095883
6.手机拍照和上传图片
<!-- 选择照片 --> <input type=file accept="image/*"> <!-- 选择视频 --> <input type=file accept="video/*">
使用总结:
- ios 有拍照、录像、选取本地图片功能
- 部分android只有选取本地图片功能
- winphone不支持
- input控件默认外观丑陋
7.微信浏览器用户调整字体大小后页面矬了,怎么阻止用户调整
原因
android侧是复写了layoutinflater 对textview做了统一处理
ios侧是修改了body.style.webkitTextSizeAdjust值
解决方案:
android使用以下代码,该接口只在微信浏览器下有效(感谢jationhuang同学提供)
/** * 页面加入这段代码可使Android机器页面不再受到用户字体缩放强制改变大小 * 但是会有一个1秒左右的延迟,期间可以考虑通过loading展示 * 仅供参考 */ (function(){ if (typeof(WeixinJSBridge) == "undefined") { document.addEventListener("WeixinJSBridgeReady", function (e) { setTimeout(function(){ WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) { alert(JSON.stringify(res)); }); },0); }); } else { setTimeout(function(){ WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) { alert(JSON.stringify(res)); }); },0); } })();
其他bug
android 2.3 bug
- @-webkit-keyframes 需要以0%开始100%结束,0%的百分号不能去掉
- after和before伪类无法使用动画
- border-radius不支持%单位
- translate百分比的写法和scale在一起会导致失效,例如-webkit-transform: translate(-50%,-50%) scale(-0.5, 1)
android 4.x bug
- 三星 Galaxy S4中自带浏览器不支持border-radius缩写
- 同时设置border-radius和背景色的时候,背景色会溢出到圆角以外部分
- 部分手机(如三星),a链接支持鼠标:visited事件,也就是说链接访问后文字变为紫色
设计高性能CSS3动画的几个要素
- 尽可能地使用合成属性transform和opacity来设计CSS3动画,不使用position的left和top来定位
- 利用translate3D开启GPU加速
参考《High Performance Animations》
fixed bug
- ios下fixed元素容易定位出错,软键盘弹出时,影响fixed元素定位
- android下fixed表现要比iOS更好,软键盘弹出时,不会影响fixed元素定位
- ios4下不支持position:fixed
解决方案
- 可用isroll.js,暂无完美方案
参考
《移动端web页面使用position:fixed问题总结》
《使用iScroll.js解决ios4下不支持position:fixed的问题》
如何阻止windows Phone的默认触摸事件
winphone下默认触摸事件事件使用e.preventDefault是无效的
目前解决方法是使用样式来禁用
html{-ms-touch-action: none;}/* 禁止winphone默认触摸事件 */
参考
《Windows phone 8 touch support》
常用的移动端框架
zepto.js
语法与jquery几乎一样,会jquery基本会zepto~
最新版本已经更新到1.16
中文(非官网):http://www.css88.com/doc/zeptojs_api/
常使用的扩展模块:
浏览器检测:https://github.com/madrobby/zepto/blob/master/src/detect.js
tap事件:https://github.com/madrobby/zepto/blob/master/src/touch.js
iscroll.js
解决页面不支持弹性滚动,不支持fixed引起的问题~
实现下拉刷新,滑屏,缩放等功能~
最新版本已经更新到5.0
underscore.js
笔者没用过,不过听说好用,推荐给大家~
该库提供了一整套函数式编程的实用功能,但是没有扩展任何JavaScript内置对象。
最新版本已经更新到1.8.2
滑屏框架
适合上下滑屏、左右滑屏等滑屏切换页面的效果
摘录原文:http://www.cnblogs.com/PeunZhang/p/3407453.html#question_18