如何判斷一個APP頁面是原生的還是H5頁面

剛好是周末，無意之間在收集相關資料的時候，發(fā)現(xiàn)有部分童鞋在問《如何判斷一個APP頁面是不是H5頁面》或者是《如何判斷app中原生頁面和h5頁面》等等類似的問題。

于是，為了幫大家解答這樣的問題，特地花了不少時間研究了一下APP里面的原生頁面和H5頁面到底有哪些不一樣。

不仔細去觀察，一般人都不會察覺出來的，再加上現(xiàn)在的H5技術和原生應用的技術很多類似，或者說實現(xiàn)的效果很相像。

我們再來回顧一下：

如今最火的APP開發(fā)模式是Hybrid ?APP開發(fā)（即混合模式，半原生半H5頁面）。

原生是Native APP
H5就是Web App

在Hybrid當中，如何快速的判斷一個APP頁面是原生的還是H5頁面呢？綜合網(wǎng)友的答案匯總整理了一下。如果你們還有更好的判斷方法也可以告知我。

一、看斷網(wǎng)的情況

把手機的網(wǎng)絡斷掉。然后點開頁面。然后可以正常顯示的東西就是原生寫的。

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

二、看布局邊界

可以打開 ?開發(fā)者選項中的顯示布局邊界，頁面元素很多的情況下布局是一整塊的是h5的，布局密密麻麻的是原生控件。頁面有布局的是原生的否則為h5頁面。（僅針對安卓手機適用）如下圖所示：

三、看復制文章的提示

這個需要你通過對比才能得出結果，比如是文章資訊頁面可以長按頁面試試，如果出現(xiàn)文字選擇、粘貼功能的是H5頁面，否則是native原生的頁面。

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

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

四、看加載的方式

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

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

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

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

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

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

比如淘寶的眾籌頁面。

七、下拉頁面的時候顯示網(wǎng)址提供方的一定是H5

如下圖所示：

以上7點也是目前幫大家整理出來的比較容易判斷的一個APP頁面是原生的還是H5頁面的方法。

希望可以幫到大家，以便更加容易區(qū)分原生APP頁面和H5頁面。

??愛心三連擊
1.看到這里了就點個在看支持下吧，你的「點贊，在看」是我創(chuàng)作的動力。
2.關注公眾號程序員成長指北，回復「1」加入高級前端交流群！「在這里有好多 前端?開發(fā)者，會討論?前端 Node 知識，互相學習」！
3.也可添加微信【ikoala520】，一起成長。
“在看轉發(fā)”是最大的支持