没有什么特别新技术,就是记录我做移动端遇到的问题
2016-02-16
微信,支付宝和APP都会遇到这些问题
一、安卓机和ios机的区别
1、常用
<head>
<meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Expires" content="0"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description"> <meta name="keywords"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>****</title> <!-- Set render engine for 360 browser --> <meta name="renderer" content="webkit"> <!-- No Baidu Siteapp--> <link href="。。。.css" rel="stylesheet" /> </head>
2、html5 获取手机摄像头与相册问题
ios直接能选择摄像头和相册,安卓机不行。
解决方式:针对Input补充capture属性,能让安卓机选择摄像头或者相册,但1G内存可能存在问题,机子内存不够,在保存相片时会卡顿崩溃
<input type="file" accept="image/*" capture="camera" />
*********************************************************
3、键盘弹出后,原本底部固定栏会受到影响
页面有INPUT输入框,在输入文字或者数字时,键盘弹出后滚动页面,原本底部固定栏浮动问题。底部固定栏用position: fixed方式置底。
安卓机屏幕宽度是总高度-键盘高,所以固定栏在键盘上面,不受影响
ios 底部固定栏在页面某个位置固定不动。
解决方式:判断机型,ios在键盘弹出时,底部固定栏改为position: relative 或者 absolute,放在页面后面
依赖JQ库,适用页面有INPUT,底部固定栏里面没有INPUT
<script src="js/jquery.js"></script>
<script type="text/javascript">
var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if (isiOS) { $("input").focus(function () { //是否用 $(":text"),看着用 var hbody = $(document.body).height() + 10; //浏览器当前窗口文档body的高度 var hwindow = $(window).height(); if (hbody > hwindow) { $(".bottom-button").css("position", "relative"); //$(".whitespace[am-mode='50px']").css("height", "0"); } else { $(".bottom-button").css("position", "absolute"); } }).blur(function() { //输入框失焦后还原初始状态 $(".bottom-button").css("position", "fixed"); }); }
</script>
*********************************************************
4、input id="txt_Date" type="date"
$("#txt_Date").focus();
文字右对齐。
ios在任意DIV使用focus直接弹出日期/时间窗口,文字不能右对齐;安卓仅时间input上获得焦点,有光标,不会弹窗,文字有的右对齐。
解决方式:针对Input写样式
<div id="DateDiv">
<span style="text-align: right; float: right; "> <input id="txt_Date" type="date" value="2016-02-15" style="min-width: 94px; text-align: right; " /> </span>
</div>
ios限制input的宽度,能实现右对齐,再使用focus能做到任意位置打开日期/时间弹窗。
安卓要把input的宽度写到需要的宽度,使用var DatedivWidth = $("#DateDiv").width();$("#txt_Date").css("min-width", DatedivWidth);让一定宽度内能打开日期/时间弹窗
*********************************************************
5、微信中图片识别二维码 [2016-02-19补充]
安卓机能识别所有情况的图片里面的二维码,除了对图片做FOCUS效果,再没遇到不能识别的。
IOS机识别二维码有很多限制
解决方式:就我遇到的情况列举
1、图片包含太多文字或者数字信息,影响识别。
2、图片深度不足,被按钮影响。
*********************************************************
2016-03-03
6、IOS 5 ,弹窗高度不是全屏 [2016-03-03补充]
INPUT有键盘弹出时,点击其他按钮,弹出全屏的DIV,该DIV的高度是全屏减去键盘后的高度,不是全屏高度。之后底部浮动栏定位也出错。原因是键盘占了空间。其他IOS在键盘收缩后,重新计算高度,弹窗自动全屏。
解决方式:等键盘收缩后,需要滚动一下,手机自动全新计算全部,我的做法是滚动底部,按自己需求修改。
1、setTimeout(function () { //针对IOS5弹窗高度不足写的 JS $(document.body).scrollTop($(document.body).height()); }, 500);
2、另外一种做法是,自己重新计算全屏高度赋值。
*********************************************************
2016-03-03
7、IOS 5 ,底部固定 [2016-03-03补充]
INPUT有键盘弹出时,底部固定栏出现问题,微信定位出错,支付宝APP其他没问题,固定在页面下面。
解决方式:判断是不是微信,重新写样式。
1、 /* 判断是不是微信 */ function isWeiXin() { var ua = window.navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == 'micromessenger') { return true; } else { return false; } } /* 判断是不是微信 end */
*********************************************************