輕松建站 服務(wù)到位為客戶提供一體化網(wǎng)站設(shè)計(jì)服務(wù)
小程序開發(fā)全功能小程序商城、開發(fā)定制服務(wù)、全程售后服務(wù)、無憂備案
分享、交流、傳播知識分享、技術(shù)交流、經(jīng)驗(yàn)積累、提升能力
做網(wǎng)頁設(shè)計(jì)時各類瀏覽器的兼容問題導(dǎo)至讓人崩潰，如當(dāng)時的IE6，IE7，IE8，各類瀏覽器需要用不同樣式去匹配，后來開發(fā)人員終于鼓起勇氣不做IE兼容。
后來微軟經(jīng)過慎重考慮，終于在WIN10發(fā)布時，廢掉IE瀏覽器，讓系統(tǒng)自帶EDGU瀏覽器，可能EDGU也是能和chrome媲美的瀏覽器，不過微軟的IE瀏覽器口碑實(shí)在太差勁了，曾經(jīng)IE瀏覽器時代后期，大部分市場給火狐占領(lǐng)，而現(xiàn)在基本給chrome占領(lǐng)。
而做小程序開發(fā)時，最讓人惡心的就是蘋果的劉海屏了，這絕對是反人類的設(shè)計(jì)，沒有一點(diǎn)實(shí)用價(jià)值，還得讓開發(fā)人員要去匹配樣式。
微信小程序開發(fā)視屏組件時，這個滿屏效果也是需要用WXSS樣式去控制的，這個并不像HTML組件直接給定寬高或自動適應(yīng)。
微信小程序vodeo組件只能通過WXSS去控制寬高，代碼如下：
wxml代碼：
<video id="myVideo" src="{{news_url}}" show-fullscreen-btn="false" object-fit="" show-play-btn="{{true}}" poster="{{news_img}}"></video>
wxss代碼：
#myVideo{
position: absolute;
width: 750rpx;
height: 1196rpx;
background: #cdcdcd;
overflow: hidden;
flex-direction:column;
align-items:center;/*垂直居中*/
justify-content: center;/*水平居中*/
z-index: 1;
}
這樣是以蘋果6分辨率作為開發(fā)參考，如下圖：
經(jīng)過測試，以上效果在蘋果六手機(jī)是沒有問題的，但是在蘋果11手機(jī)并不能實(shí)現(xiàn)自動適應(yīng)，還是得加上js代碼去控制才可以。
實(shí)現(xiàn)方法如下，
wxml代碼:
<video id="myVideo" style="height:{{height}}px;" class="goodsimg-info" src="{{news_url}}" show-fullscreen-btn="true" show-play-btn="{{true}}" poster="{{news_img}}"></video>
增加了變量height,用JS去控制高度。
js代碼：
wx.getSystemInfo({
success: function (res) {
that.setData({
height: res.windowHeight - 69,
});
}
});
通過wx.getsysteminfo去取屏的高度，再減去頂部的標(biāo)題欄，這樣基本就能兼容所類手機(jī)，在蘋果6手機(jī)和蘋果11手機(jī)是沒有全屏兼容的。
