没有什么特别新技术,就是记录我做移动端遇到的问题
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='/images/loading.gif' data-original="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 >
<input id="txt_Date" type="date" value="2016-02-15" />
</span>
</div>
ios限制input的宽度,能实现右对齐,再使用focus能做到任意位置打开日期/时间弹窗。
安卓要把input的宽度写到需要的宽度,使用var DatedivWidth = $("#DateDiv").width();$("#txt_Date").css("min-width", DatedivWidth);让一定宽度内能打开日期/时间弹窗
*********************************************************
原标题:我的小前端 (1)—— 安卓机和ios机的区别
关键词:width=device,initial,scale=1,maximum,user,scalable=no