隐藏微信浏覽器中下拉出現的網址

在微信浏覽器或者小程式中通路内嵌的h5頁面時 下拉會出現目前h5頁面的域名位址，為了美觀和安全開發的時候不希望看到這個網址。

那麼要怎麼解決？

參考微信浏覽器禁止頁面下拉檢視網址這篇文章

具體解決思路如下：

要解決這種問題肯定不是隻有單個頁面，可能會涉及很多個頁面，是以需要提供一種改動最小，最通用的解決方案，不去修改具體每個頁面的代碼。

1. 用各種js和DOM操作的手段也可以解決，但是會涉及相容性等問題，改動比較多不合适多個頁面的改動，具體的思路在上面那篇文章裡 我就不再贅述。
2. 改動最小最易複用的解決方案

body:before {
  width: 100%;
  height: 100%;
  content: ' ';
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  background: #fff;
}
           

這裡如果頁面中的body不友善改動也可以加在html上

html {
  height:100%;
}
html:before {
  content: '';
  display: block;
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  z-index: -1;
  background:#EDEDED;
}
           

設定最進階父元素的僞類為fixed并鋪滿全屏遮擋住下拉能看到的背景色和文字

簡單粗暴 親測有效