星空网 > 软件开发 > 网页设计

我的小前端—— 记录 (1)

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

2016-02-16


 

 

一、安卓机和ios机的区别

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

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

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

<input  type="file" accept="image/*" capture="camera"    />

*********************************************************
 
2、键盘弹出后,原本底部固定栏会受到影响
页面有INPUT输入框,在输入文字或者数字时,键盘弹出后滚动页面,原本底部固定栏浮动问题。底部固定栏用position: fixed方式置底。
安卓机屏幕宽度是总高度-键盘高,所以固定栏在键盘上面,不受影响
ios 底部固定栏在页面某个位置固定不动。
解决方式:判断机型,ios在键盘弹出时,底部固定栏改为position: relative,放在页面后面
依赖JQ库
<script src='/images/loading.gif' data-original="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) {
        $(":text").focus(function () {
                var hbody = $(document.body).height() + 10; //浏览器当前窗口文档body的高度
    var hwindow = $(window).height();
            if (hbody > hwindow) {
                $(".bottom-button").css("position", "relative");
                $(".am-whitespace[am-mode='50px']").css("height", "0");
            } else {
                $(".bottom-button").css("position", "absolute");
            }

        }).blur(function() { //输入框失焦后还原初始状态
            $(".bottom-button").css("position", "fixed");
            //$(".whitespace[am-mode='50px']").css("height", "50px");
        });
    }
</script>



原标题:我的小前端—— 记录 (1)

关键词:前端

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

2人去法国旅游花多少钱:https://www.vstour.cn/t/2人去法国旅游花多少钱.html
2人去三亚旅游要多少钱:https://www.vstour.cn/t/2人去三亚旅游要多少钱.html
2人三亚游多少钱:https://www.vstour.cn/t/2人三亚游多少钱.html
2人新西兰旅游费用多少:https://www.vstour.cn/t/2人新西兰旅游费用多少.html
2日桂林旅游:https://www.vstour.cn/t/2日桂林旅游.html
2日拓展训练:https://www.vstour.cn/t/2日拓展训练.html
珠海长隆横琴剧院具体地址:https://www.vstour.cn/a/334167.html
珠海长隆横琴剧院演出时间:https://www.vstour.cn/a/334168.html
相关文章
我的浏览记录
最新相关资讯
跨境电商服务平台 | 深圳旅行社 | 东南亚物流