在开发微信小程序的时候，我们会遇到各种坑，但是，这个东东是中国人做的，so...会有很多解决方案来填坑，今天就来填个小程序开发组件全屏的坑。

问题

我的小程序只有一个地图，如下代码，但他不是全屏的，

 

效果如下：

打开控制台进行css控制，但还是不行，所以得控制page。

解决

控制page，然后在控制子元素也是全屏就解决了。

对于page的控制写在app.wxss中，同时再定义一个全屏样式。

page{

  width: 100%;

  height: 100%;

}

.container{

  width: 100%;

  height: 100%;

}

将样式container运用到view和map上，

 

现在的效果

扩展

对于page的全屏还可以用vh和vw，这是css3引入的度量全屏的单位，用微信默认的rpx的话只能精确到像像素，而对于不同的设备，有不同的分辨率和大小，所以用像百分比这样的单位才是最好的，可以写成如下方式。效果和百分比一样。

page{

  width: 100vw;

  height: 100vh;

}

.container{

  width: 100vw;

  height: 100vh;

}

>>>>阅读全文

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:https://dengtar.com/12844.html