沒有什麼特別新技術，就是記錄我做移動端遇到的問題

---

 微信，支付寶和APP都會遇到這些問題

一、安卓機和ios機的區別

1、常用

<meta content="no-cache" http-equiv="Pragma" />
<br />
<meta content="no-cache" http-equiv="Cache-Control" />
<br />
<meta content="0" http-equiv="Expires" />
<br />
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
<br />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<br />
<meta name="description" />
<br />
<meta name="keywords" />
<br />
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
<br />
<title></title>
<br />
<!-- Set render engine for 360 browser --><br />
<meta content="webkit" name="renderer" />
<br />
<!-- No Baidu Siteapp-->
<pre class="brush:java;">
</pre>
<link href="。。。.css" rel="stylesheet" />

2、html5 獲取手機攝像頭與相冊問題

ios直接能選擇攝像頭和相冊，安卓機不行。

解決方式：針對Input補充capture屬性，能讓安卓機選擇攝像頭或者相冊，但1G內存可能存在問題，機子內存不夠，在保存相片時會卡頓崩潰

*********************************************************

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; ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input id="txt_Date" style="min-width: 94px; text-align: right; " type="date" value="2016-02-15" />

ios限制input的寬度，能實現右對齊，再使用focus能做到任意位置打開日期/時間彈窗。

安卓要把input的寬度寫到需要的寬度，使用var DatedivWidth = $("#DateDiv").width();$("#txt_Date").css("min-width", DatedivWidth);讓一定寬度內能打開日期/時間彈窗

*********************************************************