技術標籤：safari瀏覽器 js全屏問題

Less

• iview使用樣式檔案覆蓋設定自定義主題時，可能會遇到Inline JavaScript is not enabled. Is it set in your options?的錯誤，可能是less版本過高引起。

解決：降低less版本，降級到3.0以下。

• calc問題。

less檔案內：

.category-item + .category-item {    margin-left: calc((100% - 240px) / 3); }

預期解析輸出：

實際解析輸出(將240px作為百分比進行計算了)：

category-listcategory

item+.category-item[data-V-50737380]

margin-left:-46.66667%

解決(將表示式內容置於~""內)：

.category-item + .category-item {    margin-left: calc(~"100% / 3 - 240px / 3"); }

window.open

在網頁開發時經常會使用到window.open開啟新標籤頁，但是在部分瀏覽器(Safari等)內，js自主觸發該方法可能會被攔截。

// 解決：提前開啟空白標籤頁，然後定位新標籤頁地址let win_open = window.open('', '_blank'); // 空白標籤頁api().then(res => {  // 重定向  win_open.location = 'xxxxx/xxxxx';}).catch(err => {    // 關閉該新標籤頁  win_open.close();})
 

yuque-hexo

文章同步到hexo部落格時，語雀cdn防盜鏈導致圖片等資源無法訪問問題。

臨時解決方案：在文章模版頭部內新增meta進行繞過，參考#41。

<meta name="referrer" content="no-referrer" />

瀏覽器視訊播放自動全屏(Safari/微信瀏覽器)

在使用下面的video時，點選視訊播放會自動進入全屏狀態，退出全屏會暫停播放。

=       preload="meta" :src="detail.video_url" :poster="detail.cover_url"         controls >video>
 

解決：在video標籤內增加以下內容

x5-video-player-fullscreen="true" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-playsinline

即：

=       preload="meta" :src="detail.video_url" :poster="detail.cover_url"         controls        x5-video-player-fullscreen="true"              webkit-playsinline="true"              x-webkit-airplay="true"              playsinline="true"              x5-playsinline       >video>

env()和constant()設定安全區域

屬性：

env()和constant()，是IOS11新增特性，Webkit的css函式，用於設定安全區域與邊界的距離，有4個預定義變數：

• safe-area-inset-left：安全區域距離左邊邊界的距離

• safe-area-inset-right：安全區域距離右邊邊界的距離

• safe-area-inset-top：安全區域距離頂部邊界的距離

• safe-area-inset-bottom ：安全距離底部邊界的距離

H5網頁設定viewport-fit=cover的時候才生效，小程式裡的viewport-fit預設是cover。

使用：

    .tab-bar {      height: calc(~'50px+ constant(safe-area-inset-bottom)');//相容 IOS<11.2      height: calc(~'50px + env(safe-area-inset-bottom)');//相容 IOS>11.2      padding-bottom: constant(safe-area-inset-bottom);///相容 IOS<11.2/      padding-bottom: env(safe-area-inset-bottom);///相容 IOS>11.2/    }

效果：