Skip to content

[css] 第122天 举例说明微信端兼容问题有哪些? #1070

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

第122天 举例说明微信端兼容问题有哪些?

Activity

AnsonZnl

AnsonZnl commented on Aug 16, 2019

@AnsonZnl
Contributor

说一个微信小程序的iPhoneX适配吧, 因为iPhoneX底部没有虚拟按键,底部的横线会出现遮挡这时候就要处理下:
大概思路就是获取到客户端设备,然后判断是iPhoneX就换样式。
在app.js中添加一个检测当前设备是否是iPhoneX的变量:

  globalData: {
    userInfo: null,
    isIphoneX: false//判断是否是iPhoneX
  },
  onShow: function() {
    var that = this;
    wx.getSystemInfo({
      success: function(res) {
        // console.log('手机信息res'+res.model)  
        let modelmes = res.model;
        if (modelmes.search('iPhone X') != -1) {
          that.globalData.isIphoneX = true
        }
      },
    })
  }

在需要做兼容的xxx.js中引入:

var app= getApp();
Page({
data: {
  isIphoneX: false
},
onLoad: function(){
      // 判断是否为iPhoneX
    var isIphoneX = app.globalData.isIphoneX;
    console.log(isIphoneX ? '是iPhoneX' : '不是iPhoneX')
    this.setData({
      isIphoneX: isIphoneX
    })
  }
})

然后在xx.wxml中对需要做兼容的元素做判断 :

  <view class="{{isIphoneX ? 'width30' : 'width10'}}"></view>

然后在对应的wxss里设置好对应的类名就ok 了,比较简单方便。

greatWeber

greatWeber commented on Aug 16, 2019

@greatWeber

在ios微信端,当在输入框唤起键盘后,页面会抬升,输入完成键盘退出后,页面并没有自动恢复到原来的样子, 越接近页面底部越明显。
解决方法是使用document.documentElement.scrollIntoView(false),让页面自动回滚。

forever-z-133

forever-z-133 commented on Aug 16, 2019

@forever-z-133
  1. 微信自带的下拉出网站信息,苹果自带的滑动回弹,与 fixed 一起,非常非常酸爽
  2. 微信视频最好使用全屏模式,否则会有结尾广告、不能被元素覆盖
  3. 横屏的项目,微信支付时会竖屏,大部分苹果机支付后无法再横屏了
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@forever-z-133@greatWeber@AnsonZnl

        Issue actions

          [css] 第122天 举例说明微信端兼容问题有哪些? · Issue #1070 · haizlin/fe-interview