安卓的前端是html吗,我的小前端 （1）-- 安卓机和ios机的区别_html/css_WEB-ITnose

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

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中文网，转载请注明出处，感谢您的尊重！如有疑问，请联系admin@php.cn处理