如何判斷一個APP頁面是否是H5頁面？

01-05

如何判斷一個APP頁面是否是H5頁面？手機APP的頁面除了H5的頁面還有什麼別的頁面？
是不是上下各有一行橫框，有叉號或者是退後的都是H5頁面？

手機開發者選項開啟顯示布局邊界，頁面有布局的是native否則為h5頁面

其他地方搜索到的答案：長按頁面，如果出現文字選擇、粘貼功能的是H5頁面，否則是native頁面，我在我們自己的App裡面試了一下是可以判斷的。但是有一種情況，如果H5頁面就是一張圖片，那麼是不能通過這個方法驗證的。

謝邀

下面這篇文章在我在別的地方看到的，供參考！

Hybrid APP指的是半原生半Web的混合類App。需要下載安裝，看上去類似Native App，但只有很少的UI Web View，訪問的內容是 Web 。原生是Native APP，H5就是Web App

在Hybrid 當中，如何快速的判斷一個APP頁面是原生的還是H5頁面呢？

1、看斷網的情況

把手機的網路斷掉。然後點開頁面。然後可以正常顯示的東西就是原生寫的。

顯示404或則錯誤頁面的是html頁面。

2、看布局邊界

開發者選項-&>顯示布局邊界，頁面元素很多的情況下布局是一整塊的是h5的，布局密密麻麻的是原生控制項。頁面有布局的是原生的，否則為h5頁面。（僅針對安卓手機試用）如下圖所示：

3、看複製文章的提示，需要你通過對比才能得出結果。

比如是文章資訊頁面可以長按頁面試試，如果出現文字選擇、粘貼功能的是H5頁面，否則是native原生的頁面。

有些原生APP開放了複製粘貼功能或者關閉了。而H5的css屏蔽了複製選擇功能等等情況。需要通過對目標測試APP進行對比才可知。

這個在支付寶APP、螞蟻聚寶都是可以判斷的。

4、看載入的方式

如果在打開新頁面導航欄下面有一條載入的線的話，這個頁面就是H5頁面，如果沒有就是原生的。微信裡面打開我們的H5頁面常見的有個綠色的載入線條。如下圖紅框裡面所示：

5、看app頂部導航欄是否會有關閉的操作

如果APP頂部導航欄當中出現了關閉按鈕或者有關閉的圖標，那麼當前的頁面肯定的H5，原生的不會出現（除非設計開發者故意弄的）

美團的、大眾點評的APp、微信APP當載入h5過多的時候，左上角會出現關閉2字。

6、判斷頁面下拉刷新的時候（前提是要有下拉刷新的功能）

如果界面沒有明顯刷新現象的是原生的，如果有明顯刷新現象（比如閃一下）的是H5頁面（ios和android）。

比如淘寶的眾籌頁面。

7、下拉頁面的時候顯示網址提供方的一定是H5

iOS目前不知道必要條件可以判斷是「H5」。

Android上樓上已經回答了，開啟頁面布局就行。

補充一個全平台的充分條件：

抓包抓到url或者html的代碼肯定是「H5」；

樓上說的長按某一處會出現複製，粘貼，圖片另存為等瀏覽器按鈕的頁面也是充分條件，不是必要條件。

有的頁面也不絕對是H5，比如說菜單欄用原生，其餘部分用的H5。

有一個最簡單的辦法就是開啟調試GPU 過度繪製的選項如果是原生每一個控制項都有邊界就是繪製塊而顯示H5所承載的webview 基本上是一個整體沒有繪製塊

h5是需要調用伺服器資源的，就像打開網頁一樣。原生的就是載入的本地資源，一般老說是固定的。判斷的最好方法就是斷網查看，個人觀點。

如果是工程型的問題，我會建議用個抓包軟體，然後打開一個頁面後，觀察url，用電腦打開看看樣子是不是類似的。

典型的類似工具是flidder之類。

H5 應該在鏈接裡面可以查看源代碼的吧

現在大多數APP的H5頁面載入都是標題欄下面走進度條，其次就是長按頁面看是否可以複製，雖然這些方法都不是判斷頁面是否H5的必要條件，不過對於大多數應用來說也足夠判斷了！

一個狀況一個方式你看下【未來應用】他們的案例，能不能有什麼發現

載入是標題欄下方走進度條的方式，歡迎樓下繼續補充。

【活動盒子】來告訴你，怎麼區別app頁面是不是H5頁面：

1、app和h5頁面相比，擁有較少的頁面跳轉。網路環境一致的情況下，h5頁面渲染是需要調取伺服器的，但是app的渲染在本地，所以h5頁面跳轉更費力，不穩定感會強一些。所以h5頁面想要減少跳轉的話，一般都會使用交互技巧來隱藏文字。

2、h5頁面頁面展示空間比app小，給使用者帶來的記憶負擔大於app。人的大腦能短期記憶，但是這樣的記憶是不穩定的。如果用戶在滾動翻閱屏幕的過程中，需要臨時記憶的信息越多，他們的表現是會越差的。現在，只有很少的人會有耐心慢慢看完長長的內容，h5頁面相對於app而言，多了瀏覽器導航所佔用的屏幕空間。

3、h5與app相比的優勢在於h5頁面可以隨意的分享，而且迭代是很方便的，不同的系統只要適配一次即可。但是app的每次迭代需要在不同系統基礎上迭代。

4、h5頁面與app導航設計不同。h5頁面使原有底部導航消失，有效的導航遇到挑戰。在設計要考慮導航設計，頂部底部或左右側，還要考慮如何快速跳轉回重要頁面，導航快捷鍵：如頂部固定位置、懸浮圓圈或非首屏時頁面右側懸浮。而app的導航更直接方便。

總之，h5頁面其實基本能完成app的所有效果，但是它局限於瀏覽器這種打開方式，而app可以直接打開使用，方便一些。