ECode1024|网页移动手机端判断控制显示,一段js即可搞定!

本文由cinco原创首发于ECode1024,原文地址:https://www.xinke.org.cn/article/detail/763

我们在开发网站的时候,会兼顾两种客户端,一种是pc端,一种是mobile端,我们知道这两种客户端不可能做到显示内容一致,那么我们在mobile端显示的时候可能要抛弃很多的内容,现在有这样一个真实的需求:

ECode1024官网,在pc端打开的时候显示最顶部的扩展栏:

而在mobile端打开的时候我们希望隐藏最顶部的扩展栏:


然后,我们来分析一下,问题实际上就是如何使用js去正确的判断当前客户端是否是mobile端,如果是,就调用dom的remove或者hide方法去移除或者隐藏都可。

$('#top-box').hide();

$('#top-box').remove();

最后,判断客户端的js代码其实很简单,具体如下:

// 网站顶部扩展栏,手机和pc端控制显示 if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {

        $('#top-box').remove();

}

注意:以上这段js代码最好放到公共的js文件中去,方便页面统一自动加载使用。

本文由cinco首发于ECode1024,未经允许,禁止转载复制!

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

相关阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 29,000评论 1 45
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,242评论 1 92
  • 又是一个没有什么年味的年,嘴里抱怨着冷清无趣,但心里还是会有点小小的别样的幸福,除夕夜会认认真真把自己从头到脚收拾...
    hahhhhlo阅读 325评论 0 0
  • 首 群头暂无群尾 扣头7797374扣尾 分享标题头一金币买英雄插件分享标题尾 分享内容头一金币买各种英雄插件,最...
    软件分享阅读 310评论 0 0
  • ssh 用于创建 SSH / SFTP 客户端的 Flutter 插件,iOS 端封装了 NMSSH,Androi...
    三少ZZzzz阅读 5,091评论 1 2

友情链接更多精彩内容