微信小程序开发之全屏显示

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

问题

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

<view >
  <map ></map>
</view>

效果如下：

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

解决

控制page，然后在控制子元素也是全屏就解决了。
对于page的控制写在app.wxss中，同时再定义一个全屏样式。

page{
  width: 100%;
  height: 100%;
}
.container{
  width: 100%;
  height: 100%;
}

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

<view class="container">
  <map class="container"></map>
</view>

现在的效果

扩展

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

page{
  width: 100vw;
  height: 100vh;
}
.container{
  width: 100vw;
  height: 100vh;
}