<div>
<map style="{{width:style.width,height:style.height}}"></map>
</div>
uni.getSystemInfoSync//获取赋值给style
潘毅康
- 发布：2020-10-09 15:11
- 更新：2020-10-16 09:31
- 阅读：2105
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： 正式
HBuilderX版本号： 2.8.13
手机系统： Android
手机系统版本号： Android 9.0
手机厂商： 魅族
手机机型： 16thplus
页面类型： nvue
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
<div>
<map style="{{width:style.width,height:style.height}}"></map>
</div>
uni.getSystemInfoSync//获取赋值给style
<div>
<map style="{{width:style.width,height:style.height}}"></map>
</div>
uni.getSystemInfoSync//获取赋值给style
预期结果：
获取手机的宽高赋值给map，实现地图全屏
获取手机的宽高赋值给map，实现地图全屏
实际结果：
地图并没有全屏，出现滚动轮，无法移动地图,Hbulider2.7打包正常使用，新版打包才有这个问题
地图并没有全屏，出现滚动轮，无法移动地图,Hbulider2.7打包正常使用，新版打包才有这个问题
bug描述：
uni.getSystemInfoSync获取手机的宽度和高度然后:style绑定到map组件让地图全屏无效,该bug在hublider2.7时候不存在，今天更新到最新版Hubilder就有这个问题,是云端打包以后才会有，本地基座调试的时候一切正常
已确定bug是仅在nvue页面会有这个问题，vue页面不会有这个问题。请看我的测试demo
潘毅康 (作者) - pyk
测试新版HBuilderx uni.getSystemInfoSync在nvue地图页面的bug 尝试把nvue页面换成vue发现一切正常，经测试在HbuilderX2.7.14是最后可行的版本，在此之后的版本都有这个bug
-
-
潘毅康 (作者)
回复 DCloud_UNI_GSQ: 我这边测试最新的 alpha 版也是不行，但是我发现同一款手机新版本的HbuilderX获取的设备高度720，旧版本的HbuilderX获取的高度是690px
2020-10-11 10:12
-
潘毅康 (作者) - pyk
新旧版本的Hbuildex获取同一手机的高不一样，也就导致了新版本获取的高赋值给map组件无法全屏
旧版本:{
"errMsg": "getSystemInfoSync:ok",
"brand": "Meizu",
"model": "16th Plus",
"pixelRatio": 3,
"screenWidth": 360,
"screenHeight": 690,
"windowWidth": 360,
"windowHeight": 690,
"statusBarHeight": 28,
"language": "zh-CN",
"system": "8.1.0",
"version": "1.9.9.80255",
"fontSizeSetting": "",
"platform": "android",
"SDKVersion": "",
"windowTop": 0,
"windowBottom": 0,
"safeArea": {
"left": 0,
"right": 360,
"top": 28,
"bottom": 690,
"width": 360,
"height": 662
},
"safeAreaInsets": {
"top": 28,
"right": 0,
"bottom": 0,
"left": 0
}
}
新版本:{
"errMsg": "getSystemInfoSync:ok",
"brand": "Meizu",
"model": "16th Plus",
"pixelRatio": 3,
"screenWidth": 360,
"screenHeight": 720,
"windowWidth": 360,
"windowHeight": 720,
"statusBarHeight": 28,
"language": "zh-CN",
"system": "8.1.0",
"version": "1.9.9.80432",
"fontSizeSetting": "",
"platform": "android",
"SDKVersion": "",
"windowTop": 0,
"windowBottom": 0,
"safeArea": {
"left": 0,
"right": 360,
"top": 28,
"bottom": 720,
"width": 360,
"height": 692
},
"safeAreaInsets": {
"top": 28,
"right": 0,
"bottom": 0,
"left": 0
}
}![[已删除]](http://img-cdn-tc.dcloud.net.cn/uploads/avatar/001/52/41/30_avatar_mid.jpg?v=0){kind=avatar}
承接前端H5、小程序、APP、PC端网站等外包，主要技术栈为vue、uni-app，有意请加微信:13070273424(我是前端。1. 我找有单子的服务端合作人。2. 整个项目外包给我，我这也有个小团队。3. 兼职，公司/团队偶尔丢点小项目或者页面调整等)
潘毅康 (作者)
HBuilderX2.7.14本地基座和自定义基座和打包都正常，最新版HBuilderX本地基座正常，自定义基座和打包都有异常，重新下载最新版还是存在这个问题
2020-10-09 15:44
chenli
回复 潘毅康: <map> 组件的宽/高推荐写直接量，比如：750rpx，不要设置百分比值。
2020-10-09 16:16
潘毅康 (作者)
回复 chenli: 并没有设置百分值，我用uni.getSystemInfoSync获取的是设备固定值然后动态绑定到map组件上
2020-10-09 17:17
chenli
回复 潘毅康: 这里获取的值是没有单位的，有添加单位吗？
2020-10-09 17:22
潘毅康 (作者)
回复 chenli: let sysInfo = uni.getSystemInfoSync();
this.style.height = sysInfo.windowHeight ? sysInfo.windowHeight + 'px' : '880px';
this.style.width = sysInfo.windowWidth ? sysInfo.windowWidth + 'px' : '880px';
2020-10-09 17:46
潘毅康 (作者)
回复 chenli: 如果是我的问题的话，之前就不会一直都能用。这是我的代码片段
2020-10-09 17:46
DCloud_UNI_GSQ
回复 潘毅康: 打印一下 sysInfo
2020-10-09 18:30
潘毅康 (作者)
回复 DCloud_UNI_GSQ: {
"errMsg": "getSystemInfoSync:ok",
"brand": "Meizu",
"model": "16th Plus",
"pixelRatio": 3,
"screenWidth": 360,
"screenHeight": 720,
"windowWidth": 360,
"windowHeight": 720,
"statusBarHeight": 28,
"language": "zh-CN",
"system": "8.1.0",
"version": "1.9.9.80432",
"fontSizeSetting": "",
"platform": "android",
"SDKVersion": "",
"windowTop": 0,
"windowBottom": 0,
"safeArea": {
"left": 0,
"right": 360,
"top": 28,
"bottom": 720,
"width": 360,
"height": 692
},
"safeAreaInsets": {
"top": 28,
"right": 0,
"bottom": 0,
"left": 0
}
}
2020-10-09 22:13
潘毅康 (作者)
你看一下我下面打印出来的同一个手机两个HbuilderX版本获取的设备数据，
2020-10-11 10:37