[css] 舉例說明微信端兼容問題有哪些？

說一個微信小程序的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(){// 判斷是否為iPhoneXvar isIphoneX = app.globalData.isIphoneX;console.log(isIphoneX ? '是iPhoneX' : '不是iPhoneX')this.setData({isIphoneX: isIphoneX})} })

個人簡介

我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關前端面試題

總結

以上是生活随笔為你收集整理的[css] 举例说明微信端兼容问题有哪些？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。