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

WBOY
Freigeben: 2016-06-24 11:26:48
Original
1479 Leute haben es durchsucht

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

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);让一定宽度内能打开日期/时间弹窗

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

 

 

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage