首頁 > web前端 > html教學 > 我的小前端 (1)-- 安卓机和ios机的区别_html/css_WEB-ITnose

我的小前端 (1)-- 安卓机和ios机的区别_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:26:48
原創
1520 人瀏覽過

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

2016-02-16

 微信,支付宝和APP都会遇到这些问题

 

一、安卓机和ios机的区别

1、常用


        
        
        
        
        
        
        
        
        ****
        
        
        
        
    

 

2、html5 获取手机摄像头与相册问题

ios直接能选择摄像头和相册,安卓机不行。

解决方式:针对Input补充capture属性,能让安卓机选择摄像头或者相册,但1G内存可能存在问题,机子内存不够,在保存相片时会卡顿崩溃


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

 

3、键盘弹出后,原本底部固定栏会受到影响

页面有INPUT输入框,在输入文字或者数字时,键盘弹出后滚动页面,原本底部固定栏浮动问题。底部固定栏用position: fixed方式置底。

安卓机屏幕宽度是总高度-键盘高,所以固定栏在键盘上面,不受影响

ios 底部固定栏在页面某个位置固定不动。

解决方式:判断机型,ios在键盘弹出时,底部固定栏改为position: relative 或者 absolute,放在页面后面

依赖JQ库,适用页面有INPUT,底部固定栏里面没有INPUT

    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");
        });
    }

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

 

4、input id="txt_Date"  type="date"

$("#txt_Date").focus();

文字右对齐。

 ios在任意DIV使用focus直接弹出日期/时间窗口,文字不能右对齐;安卓仅时间input上获得焦点,有光标,不会弹窗,文字有的右对齐。

解决方式:针对Input写样式

   
       
   

ios限制input的宽度,能实现右对齐,再使用focus能做到任意位置打开日期/时间弹窗。

安卓要把input的宽度写到需要的宽度,使用var DatedivWidth = $("#DateDiv").width();$("#txt_Date").css("min-width", DatedivWidth);让一定宽度内能打开日期/时间弹窗

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

 

 

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板