mui扫码横屏全屏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="../../css/common/mui.min.css" />
<link rel="stylesheet" type="text/css" href="../../css/common/common.css"/>
<link rel="stylesheet" type="text/css" href="../../css/common/iconfont.css"/>
<style type="text/css">
body{
background-color: #f2f5f6 !important;
}
#header{
background-color: #b9bbba;
height: 64px;
padding-top: 20px;
}
#header a{
color: #fff;
}
#header a.mui-pull-right{
font-size: 16px;
padding-top: 14px;
padding-bottom: 14px;
}
#bcid {
width: 100%;
position: absolute;
top: 64px;
bottom: 180px;
text-align: center;
background-color: #f2f5f6;
overflow: hidden;
}
#bciddiv{
width: 150%;
height: 110%;
display: none;
position: relative;
top: 64px;
left: -25%;
}
.tip {
color: #000;
font-weight: normal;
text-shadow: 0px -0.2px #103E5C;
}
footer {
width: 100%;
height: 150px;
position: absolute;
bottom: 0px;
line-height: 44px;
text-align: center;
color: #FFF;
}
.fbt {
width: 50%;
height: 100%;
background-color: #b9bbba;
float: left;
}
.yuan{
height: 60px;
width: 60px;
margin-top: 30px;
margin-left: 50%;
transform: translate(-50%);
}
.yuan .iconfont{
margin-top: 12px;
font-size: 36px;
color: #fff;
}
</style>
</head>
<body style="background-color: #000000;">
<header class="mui-bar mui-bar-nav mui-bar-transparent" id="header">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">扫一扫</h1>
<a class="mui-icon mui-pull-right" onclick="scanPicture()">相册</a>
</header>
<div id="bcid">
<div style="height:50%"></div>
<p class="tip">...载入中...</p>
<div id="bciddiv"></div>
</div>
<footer>
<div class="fbt" onclick="inputimei()">
<div class="yuan">
<span class="mui-icon iconfont icon-jushou"></span>
</div>
<span>
手输设备号
</span>
</div>
<div class="fbt">
<div class="yuan" onclick="openlight()">
<span class="mui-icon iconfont icon-zhaoming"></span>
</div>
<span>
手电筒
</span>
</div>
</footer>
<script src="../../js/common/jquery-3.0.0.min.js"></script>
<script src="../../js/common/mui.js"></script>
<script src="../../js/common/common.js"></script>
<script type="text/javascript">
mui.init({
beforeback:function(){
if(scantype=='D'){
var i = plus.webview.getWebviewById('deviceList');
mui.fire(i, 'refreshDeviceList');
}else if(scantype=='L'){
var i = plus.webview.getWebviewById('lampList');
mui.fire(i, 'refreshLampList');
}
}
});
var ws=null,wo=null;
var scan=null,domready=false;
var scantype,projectId,ImeiId,cellId,cellAddr,ImeiMac;
// H5 plus事件处理
function plusReady(){
if(ws||!window.plus||!domready){
return;
}
// 获取窗口对象
ws=plus.webview.currentWebview();
wo=ws.opener();
// 开始扫描
ws.addEventListener('show', function(){
//自定义的扫描控件样式
var styles = {frameColor: "#c6c6c6",scanbarColor: "#c6c6c6",background: "#f2f5f6"}
$("#bcid div").css("display","none");
$("#bcid p").css("display","none");
$("#bcid #bciddiv").css("display","block");
scan=new plus.barcode.Barcode('bciddiv','',styles);
scan.onmarked=onmarked;
scan.start();
}, false);
scantype=ws.type;
projectId=ws.projectId;
ImeiId=ws.ImeiId;
ImeiMac=ws.ImeiMac;
cellId=ws.cellId;
cellAddr=ws.cellAddr;
// 显示页面并关闭等待框
ws.show('pop-in');
}
if(window.plus){
plusReady();
}else{
document.addEventListener('plusready', plusReady, false);
}
// 监听DOMContentLoaded事件
document.addEventListener('DOMContentLoaded', function(){
domready=true;
plusReady();
}, false);
// 二维码扫描成功
function onmarked(type, result, file){
switch(type){
case plus.barcode.QR:
type = 'QR';
break;
case plus.barcode.EAN13:
type = 'EAN13';
break;
case plus.barcode.EAN8:
type = 'EAN8';
break;
default:
type = '其它'+type;
break;
}
result = result.replace(/\n/g, '');
result = result.replace(/\"/g, '');
//分析扫描结果：是URL就跳转 ，不是就提示
if(result.indexOf('http://')==0 || result.indexOf('https://')==0){
plus.nativeUI.confirm(result, function(i){
if(i.index == 0){
mui.back();//返回上一页
plus.runtime.openURL(result);
scan.cancel();
}else{
mui.back();//返回上一页
scan.cancel();
}
}, '', ['打开', '取消']);
}else{
}
}
// 从相册中选择二维码图片
function scanPicture(){
plus.gallery.pick(function(path){
plus.barcode.scan(path,onmarked,function(error){
plus.nativeUI.alert('无法识别此图片');
});
}, function(err){
});
}
//打开闪关灯
var setFlash=false;
function openlight(){
if(setFlash){
setFlash=false;
}else{
setFlash=true;
}
scan.setFlash(setFlash);
}
</script>
</body>
</html>
主要是设置一个子div，高度为父元素110%左右，父元素的高度为180px，底部高度为150px，差的30px大致为父元素高度的10%，这个数值还需要测试，适配；
对比效果：
修改后：
浙公网安备 33010602011771号