没有什么特别新技术，就是记录我做移动端遇到的问题

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机的区别的更多相关文章

  1. 安卓手机与iOS手机的区别

    安卓手机与iOS手机的区别 1.操作系统不同  安卓手机都是安卓操作系统:IOS手机都是iOS操作系统. 目前安卓最新的系统是Android 8.1:iOS版本最新的是iOS 11. 2.操作方式不同 ...

  2. 苹果ATS特性服务器配置指南 HTTPS 安卓可以用 IOS 报错。

    解决方案:https://www.qcloud.com/document/product/400/6973 ATS检测:https://www.qcloud.com/product/ssl#userD ...

  3. 微信小程序、安卓APP、苹果APP对比分析

    今天的话题主要是关于微信小程序.安卓APP.苹果APP对比分析.既然是对比分析肯定是将它们一个一个说明. 本篇不涉及技术话题,只讲解微信小程序.安卓APP.苹果APP它们各自的优缺点及其应用场景. 一 ...

  4. [开源硬件DIY] 自制一款精致炫酷的蓝牙土壤温湿度传感器，用于做盆栽呵护类产品（API开放，开发者可自行DIY微信小程序＼安卓IOS应用）

    目录 前言: 1. 成品展示 2. 原理图解析 3. pcb设计 4. 嵌入式对外提供接口 4.1 蓝牙广播 4.2 蓝牙服务和属性 4.3 数据包格式 4.4 数据通信模型 重要 . 前言: 本期给 ...

  5. 查询优化--小表驱动大表（In，Exists区别）

    Mysql 系列文章主页 =============== 本文将以真实例子来讲解小表驱动大表(In,Exists区别) 1 准备数据 1.1 创建表.函数.存储过程 参照  这篇(调用函数和存储过程批 ...

  6. 01_Weblogic课程之概念篇：代理服务器，web服务器，应用程序服务器，JNDI概念，JTA概念，Java消息服务，Java验证和授权（JAAS）,Java管理扩展，Web客户机，客户机应用程序

     1 什么是服务器 Weblogic中服务器分为两种,一种是受管服务器,另外一种是管理服务器. Weblogic课程(Weblogic是Oracle公司的,最开始的是BEA公司的) 一 系统管理 ...

  7. 使用未付费的账号真机调试 iOS 程序，过几天后程序一打开就会闪退

    使用未付费的苹果开发者账号真机调试 iOS 程序,过几天后程序一打开就会闪退.   解决办法: 删除 Provisioning Profile,重新配置一次. 终极解决办法:花钱购买苹果开发者账号. ...

  8. Xcode 7如何免费真机调试iOS应用

    Xcode 7如何免费真机调试iOS应用的简单方式: 运行Xcode后,点击菜单中的Preferences…进入Accounts标签,这里选择添加Apple ID:在弹出的对话框中登入你的Apple ...

  9. 【转】Xcode7真机调试iOS应用程序

    原文网址:http://i.cnblogs.com/EditPosts.aspx?opt=1 近日苹果发布的新的Xcode7带来了许多特性,比如:swift语言比以前运行更快.功能更强.代码具有更高的 ...

随机推荐

  1. Easyui tree 开启拖放后 在IE下 性能惨不忍睹

    项目中加载一个树结构代码如下 //加载树 function LoadTree() { var url = "../Ajax/StationTree.ashx?showVirtual=1&qu ...

  2. 网易云课堂_C++程序设计入门(上)_第3单元：更上一层楼 – 超越C的语法_第3单元作业【3】-在线编程（难度：中；10分）

    1 本题要求实现两个重载的swap函数,每个swap函数都可交换3个整数a,b,c的值.将a的值存入b,b的值存入c,c的值存入a, 并且返回三个整数中最大的数的值.例如a,b,c的值为1,2,3,则 ...

  3. mesos博客集

    http://dongxicheng.org/category/apache-mesos/

  4. ASP.NET打印EXCEl报表技术总结

    序言:我们在做企业项目或者一些管理系统的时候往往会用到导出到excel报表这项功能,下面我介绍的是用windows自带的excel来打印 首先必须引入:Interop.Excel.dll.Intero ...

  5. java工厂类与反射机制

    java 简单工厂类 2012-04-22 15:44:07|  分类: java |  标签:java工厂类  简单工厂类  |举报|字号 订阅     简单工厂模式需要由以下角色组成: 接口    ...

  6. 浅谈：配置本地yum源（centos）

    删除YUM的所有配置信息[root@server yum.repos.d]#rm -rf * 现在手动配置:1.在根目录下创建文件夹centos-yum: [root@server /]#mkdir ...

  7. HTML代码中<%%>、<%=%>、<%:%>各是什么意思?分别用来实现什么的?

    运行.获取后台代码或值.<%%>之间可以写服务器端代码,比如 <% for(var i=0;i<10;i++){ //执行循环体 } %> 又如 <% for(va ...

  8. const与重载

    转载自CSDN博客:http://blog.csdn.net/polarbearboy/article/details/6762752   (由于该作者也属于转载,不知原出处) PS:我们很易对下面这 ...

  9. android:versionCode和android:versionName

    Android的版本可以在androidmainfest.xml中定义,主要有android:versionCode和android:versionName android:versionCode:主 ...

  10. contact表单错误解决记录

    在上篇表单验证中,过程中可谓坎坷,记录一下错误问题及解决方案. 我们用到的模板contact_form.html如下,其他urls.py自行去修改. <html> <head> ...