移动端隐藏手机浏览器的地址栏一下底部的菜单栏

1、在设置移动端页面的宽高为100%的时候,里面的元素设置flex:1的时候,因为浏览器的地址栏以及下面的工具栏的问题会导致在有的手机上面的页面显示不全的问题。因为我们不好计算每一个浏览器的地址栏以及工具栏的高度,所以我们直接把它隐藏起来即可,下面的隐藏的代码。
参考:https://juejin.cn/post/6844903983811674126

  <!-- webApp全屏显示,IOS设备 -->
  <meta name='apple-mobile-web-app-capable' content='yes' />
  <!-- 通用的浏览器 -->
  <meta name='full-screen' content='true' />
  <!-- QQ浏览器(X5内核)独有的META -->
  <meta name='x5-fullscreen' content='true' />
  <!-- 360浏览器独有的 -->
  <meta name='360-fullscreen' content='true' />

备注:自测只有iso会生效,其他无效
demo:

if(isAndroid()){
if(isInWeixin() || isWeibo() || isDingTalk() || isBaidu()){
  this.bottom = 0;
}else if(isUCBrowser()){
  this.bottom = 20 * window.devicePixelRatio + 10;
}
}else{
  this.bottom = 12 * window.devicePixelRatio + 10;
}
//判断是否是Android,然后再判断是哪个APP或浏览器,再添加底部安全距离,避免遮挡网页内容,
//如果是iOS就直接使用 <meta name='apple-mobile-web-app-capable' content='yes' />就可以了。

2、移动端 a 标签点击会有蓝色的背景色

解决方案:
a { -webkit-tap-highlight-color:transparent; }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容