微信小程序 屏幕适配器

屏幕适配器的作用是兼容不同型号的手机，进行适配，下面我用的是单独写个页面进行实现。

首先我们看到的是wxml页面：

<view class="content">
  <view class="popup">
    <image class="top" src="{{cdn + '/top.png'}}"></image>
    <image class="title1" src="{{cdn + '/title1.png'}}"></image>
    <image class="content" src="{{cdn + '/content.png'}}"></image>
    <image class="logo" src="{{cdn + '/logo.png'}}"></image>
    <image class="title2" src="{{cdn + '/title2.png'}}"></image>
    <image class="title3" src="{{cdn + '/title3.png'}}"></image>
    <image class="grass" src="{{cdn + '/grass.png'}}"></image>
    <image class="title4" src="{{cdn + '/title4.png'}}"></image>
  </view>
</view>

json页面：

{
  "usingComponents": {},
  "navigationBarTitleText": "大小屏幕兼容"
}

样式页面：

.content { width: 100%; height: 100%; position: absolute !important; left: 0; top: 0; }
.content .popup { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #aefcef; overflow: hidden; }
.content .popup .top { position: absolute; width: 750rpx; height: 341rpx; left: 0rpx; top: 0rpx; }
.content .popup .title1 { position: absolute; width: 355rpx; height: 59rpx; left: 191rpx; top: 119rpx; }
.content .popup .content { position: absolute; width: 750rpx; height: 1220rpx; left: 0rpx; top: 166rpx; }
.content .popup .logo { position: absolute; width: 25rpx; height: 246rpx; left: 59rpx; bottom: 293rpx; }
.content .popup .title2 { position: absolute; width: 545rpx; height: 334rpx; left: 148rpx; top: 379rpx; }
.content .popup .title3 { position: absolute; width: 288rpx; height: 89rpx; left: 236rpx; bottom: 304rpx; }
.content .popup .grass { position: absolute; width: 750rpx; height: 390rpx; left: 0rpx; bottom: 0rpx; }
.content .popup .but1 { position: absolute; width: 262rpx; height: 125rpx; left: 245rpx; bottom: 111rpx; }
.content .popup .title4 { position: absolute; width: 259rpx; height: 44rpx; left: 13rpx; bottom: 50rpx; }

/* ------- 16:9(标准屏安卓手机、iphone5/6/7/8) -------*/
@media screen and (width: 360px) and (min-height: 640px) and (max-height: 659px), screen and (width: 393px) and (min-height: 695px) and (max-height: 729px), screen and (width: 412px) and (min-height: 732px) and (max-height: 749px), screen and (width: 320px), screen and (width: 375px) and (min-height: 600px) and (max-height: 667px), screen and (width: 414px) and (min-height: 670px) and (max-height: 736px) {
  .content .popup .top { top: -120rpx; }
  .content .popup .title1  { top: 30rpx; }
  .content .popup .content { top: 45rpx; }
  .content .popup .logo { bottom: 230rpx; transform: scale(0.8); }
  .content .popup .title2  { top: 260rpx; }
  .content .popup .title3 { bottom: 180rpx; }
  .content .popup .grass { bottom: -60rpx; }
  .content .popup .but1 { bottom: 50rpx; }
  .content .popup .title4 { bottom: 10rpx; }
}

/*-------- 15:9（标准屏+虚拟系统按键安卓手机（华为P9））-------*/
@media screen and (width: 360px) and (min-height: 520px) and (max-height: 639px) {
  .content .popup .top { top: -120rpx; }
  .content .popup .title1  { top: 30rpx; }
  .content .popup .content { bottom: 45rpx; }
  .content .popup .logo { bottom: 230rpx; transform: scale(0.8); }
  .content .popup .title2  { bottom: 250rpx; }
  .content .popup .title3 { bottom: 180rpx; }
  .content .popup .grass { bottom: -60rpx; }
  .content .popup .title4 { bottom: 10rpx; }
}

js页面：

Page({

  data: {
    cdn: 'https://chaozhenrihuajianhang.oss-cn-hangzhou.aliyuncs.com/test/xiaochengxu/screenAdaptation'
  },

})