移动端开发--问题记录

1、input聚焦，隐藏底部fixed固定元素

var client_h = document.documentElement.clientHeight;

jQuery(window).on("resize",function(){

if (/iphone|ipad/i.test(navigator.userAgent.toLowerCase())) {

//ios这块什么都不用做

} else {

//安卓触发window.resize

var body_h = document.documentElement.clientHeight;

if( client_h > body_h){

jQuery('.enquiry_main6').css('position','static')

}else{

jQuery('.enquiry_main6').css('position','fixed')

}

}

})

jQuery('#materials input').on('focus',function(){

jQuery('.enquiry_main6').hide();

})

jQuery('#materials input').on('blur',function(){

jQuery('.enquiry_main6').show();

})

2、移动端iphoneX的顶部+底部适配层（基于mui框架）

第一步、manifest.json配置文件 ----> ‘代码视图’ ----> 'plus'下添加代码（添加安全区域）

"safearea":{

"background":"#fff",

"bottom":{

"offset":"auto"

}

}

第二步、meta标签中添加viewport-fit=cover

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">

viewport-fit：实现全屏适配，这样做就会使头部样式延申至刘海屏部分

第三步、添加了公共的css样式

body {

padding-top: constant(safe-area-inset-top);

}

.mui-bar.mui-bar-nav {

top: constant(safe-area-inset-top);

}