H5及H5 app對iphoneX及以上適配

本文主要介紹對iphonex及以上適配。提供css和js的適配方式。

注：viewport-fit=cover使得頁面內容完全覆蓋整個視窗

body

注：只有設定了viewport-fit=cover，才能使用env()。env()跟constant()需要同時存在，而且順序不能換。

注：當然不是只能用padding，也可以使用margin等屬性

4.1支援演算法：

if($(window).width() === 375 && $(window).height() === 724 && window.devicepixelratio === 3)

viewport-fit=containmeta標籤,使頁面展示在安全區

H5App 美麗天氣

分別對應春夏秋冬。背景的實現依靠了兩個div，html如下 class weather cover div class weather content div 其中，cover是季節桌布 準備了春夏秋冬四張 其css如下 weather cover weather cover spring weat...

H5 App除錯方法參考

相較於pc端，移動端除錯要更加豐富一些，下面對除錯的方法進行簡單彙總。主要分為以下幾點 chrome developer tools android chrome inspect ios safari gapdebug weinre weinre相關套件 除了chrome，firefox中的除錯工具...

H5內嵌原生app

因此，可以看到內嵌其實並不難，難就難在要適配 原生與web互動 資料傳遞等，當然我們也可以使用vue來開發h5介面 一 如何實現互動？答案是使用第三方外掛程式jsbridge 1.通過js偽造請求 原生攔截獲取資料 原理類似於jsonp 首先在js中定義乙個函式並掛載在window下，然後在原生中呼...