我的小前端 (1)—— 安卓机和ios机的区别
没有什么特别新技术,就是记录我做移动端遇到的问题
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 */
*********************************************************
我的小前端 (1)—— 安卓机和ios机的区别的更多相关文章
- 安卓手机与iOS手机的区别
安卓手机与iOS手机的区别 1.操作系统不同 安卓手机都是安卓操作系统:IOS手机都是iOS操作系统. 目前安卓最新的系统是Android 8.1:iOS版本最新的是iOS 11. 2.操作方式不同 ...
- 苹果ATS特性服务器配置指南 HTTPS 安卓可以用 IOS 报错。
解决方案:https://www.qcloud.com/document/product/400/6973 ATS检测:https://www.qcloud.com/product/ssl#userD ...
- 微信小程序、安卓APP、苹果APP对比分析
今天的话题主要是关于微信小程序.安卓APP.苹果APP对比分析.既然是对比分析肯定是将它们一个一个说明. 本篇不涉及技术话题,只讲解微信小程序.安卓APP.苹果APP它们各自的优缺点及其应用场景. 一 ...
- [开源硬件DIY] 自制一款精致炫酷的蓝牙土壤温湿度传感器,用于做盆栽呵护类产品(API开放,开发者可自行DIY微信小程序\安卓IOS应用)
目录 前言: 1. 成品展示 2. 原理图解析 3. pcb设计 4. 嵌入式对外提供接口 4.1 蓝牙广播 4.2 蓝牙服务和属性 4.3 数据包格式 4.4 数据通信模型 重要 . 前言: 本期给 ...
- 查询优化--小表驱动大表(In,Exists区别)
Mysql 系列文章主页 =============== 本文将以真实例子来讲解小表驱动大表(In,Exists区别) 1 准备数据 1.1 创建表.函数.存储过程 参照 这篇(调用函数和存储过程批 ...
- 01_Weblogic课程之概念篇:代理服务器,web服务器,应用程序服务器,JNDI概念,JTA概念,Java消息服务,Java验证和授权(JAAS),Java管理扩展,Web客户机,客户机应用程序
1 什么是服务器 Weblogic中服务器分为两种,一种是受管服务器,另外一种是管理服务器. Weblogic课程(Weblogic是Oracle公司的,最开始的是BEA公司的) 一 系统管理 ...
- 使用未付费的账号真机调试 iOS 程序,过几天后程序一打开就会闪退
使用未付费的苹果开发者账号真机调试 iOS 程序,过几天后程序一打开就会闪退. 解决办法: 删除 Provisioning Profile,重新配置一次. 终极解决办法:花钱购买苹果开发者账号. ...
- Xcode 7如何免费真机调试iOS应用
Xcode 7如何免费真机调试iOS应用的简单方式: 运行Xcode后,点击菜单中的Preferences…进入Accounts标签,这里选择添加Apple ID:在弹出的对话框中登入你的Apple ...
- 【转】Xcode7真机调试iOS应用程序
原文网址:http://i.cnblogs.com/EditPosts.aspx?opt=1 近日苹果发布的新的Xcode7带来了许多特性,比如:swift语言比以前运行更快.功能更强.代码具有更高的 ...
随机推荐
- linux之SQL语句简明教程---BETWEEN
IN 这个指令可以让我们依照一或数个不连续 (discrete) 的值的限制之内抓出数据库中的值,而BETWEEN 则是让我们可以运用一个范围 (range) 内抓出数据库中的值.BETWEEN 这个 ...
- x/nfu-用gdb查看内存
用gdb查看内存 2007-12-08 12:43 用gdb查看内存 格式: x /nfu <addr> 说明x 是 examine 的缩写 n表示要显示的内存单元的个数 f表示显示方式, ...
- 通过P-SMR看State Machine Replication
在一个复制系统中,为了保持一致性,各个replicated server是串行运行.这样性能上就会比仅仅有一台server的系统慢,由于仅仅有一台server能够进行并行处理.假设在复制系统中各个se ...
- UIScrollView 与 UIPageView 的联合使用
@interface ViewController : UIViewController<UIScrollViewDelegate> { UIScrollView * scrollV ...
- 3.数据库操作相关术语,Oracle认证,insert into,批量插入,update tablename set,delete和truncate的差别,sql文件导入
1相关术语 语句 含义 操作 DML语句 (Data Manipulation Language) 数据库操作语言 insert update delete select DDL语言 (Date ...
- 开发板怎样开启telnet服务
linux开发板开启telnet服务须要一下几个条件: 1.文件系统支持telnet busybox默认是把telnet和telnetd功能编进去了的,所以这一步一般都省了. 2.挂载devpts 挂 ...
- Javascript 【JSON对象】
var box = JSON.parse(json); //将字符串解析为JSON var json = JSON.stringify(box); //讲JSON转换为字符串 var b ...
- Android学习之sqlite与listview
在android系统中使用的是sqlite数据库,前面的简易登录系统已经讲述了数据库的应用.本例的重点是实现数据库与listview的绑定.demo的数据是将个人的信息绑定到listview中,并存在 ...
- 从客户端中检测到有潜在危险的Request.Form值的解决办法
http://www.pageadmin.net/article/20141016/935.html 如果你网站iis服务器asp.net采用了4.0的版本,则默认会阻止客户端的html内容提交,提交 ...
- zoj1027 Human Gene Functions
一道动态规划,两个串进行匹配,不同字母匹配的值不一样,也可以和空格匹配(空格不能与空格匹配),求最大的匹配值. 数据很弱,每个串都在100以内. 定义dp[i][j]为第一个串前i个数和第二个串前j个 ...