移动端页面开发总结[摘录]

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事件,也就是说链接访问后文字变为紫色

参考《border-radius 移动之伤

设计高性能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://zeptojs.com/

中文(非官网):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

官网:http://cubiq.org/iscroll-5

underscore.js

笔者没用过,不过听说好用,推荐给大家~

该库提供了一整套函数式编程的实用功能,但是没有扩展任何JavaScript内置对象。

最新版本已经更新到1.8.2

官网:http://underscorejs.org/

滑屏框架

适合上下滑屏、左右滑屏等滑屏切换页面的效果

slip.js

iSlider.js

fullpage.js

摘录原文:http://www.cnblogs.com/PeunZhang/p/3407453.html#question_18

posted on 2015-10-10 18:27  靖儿  阅读(478)  评论(0编辑  收藏  举报

导航