这篇文章发布于 2019年08月6日,星期二,01:20,归类于 HTML相关。 阅读 24020 次, 今日 8 次 20 条评论
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8827
本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。
一、纳尼,怎么bug还在那里?
昨晚睡得很早,今天状态很好,谁知测试驾到,登录产品账号,严重bug卧槽,让我马上修好。
打开项目仓库,查看代码思路,发现可疑出处,改正非常迅速,刷新查看屏幕,居然还是错误!
难道其他问题?排查非常努力,想想只能这里,再次修改实例,结果很不顺利,错误还在那里。
真的非常神奇,想想类似经历,不费吹灰之力,现在居然没戏,完全没有道理,究竟问题哪里?
难道缓存还在,F5刷新已烂,抓狂奔溃无奈,后来定睛一看,我去什么鸟蛋,线上地址在玩!
当场吐血三升,为何如此蠢笨,为何如此天真,导致如此蛋疼,仔细思考根本,favicon没有区分。
下图图标线上:
下图不是线上:
单看标题一样:
想要区分够呛!
问题既然弄清,就要设法搞定,有种方法可行,使用不同图形,线上一种图形,本地另外图形。
二、去伪存真,显著区分
线上保持不变,本地代码多点,弄个favicon图片,差别定要明显,PNG base64内嵌,从此问题再见。
例如我的实现:
<?php if ($_SERVER['HTTP_HOST'] == 'localhost') { ?> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFv3EA////ivf3AgAAAD1JREFUeNqMjlEKADAIQn33v/TY+tAJg1VQhmnSb1CQXUZcfUYCHgVSBZpCGQ3dR8Qufa1BpE3Un7xjCTAAHt4AP710jNUAAAAASUVORK5CYII=" sizes="16x16"> <? } ?>
效果可以体验:
线上蓝底白字图片,本地橙底白字图片,本地线上区分明显,低级错误不再出现。改动可以准确体验,不再刷到错误页面,从此告别啪啪打脸,状态饱满真每一天。
其他要点
PNG图片base64内嵌,只是为了减少外链,直接URL地址呈现,favicon也会准确出现。
<link rel="icon" type="image/png" href="https://image.zhangxinxu.com/image/blog/201908/favicon-16.png" sizes="16x16">
最后再说一点,sizes
尺寸多变,32×32更为推荐,retina屏清晰可见。
<link rel="icon" type="image/png" href="https://image.zhangxinxu.com/image/blog/201908/favicon-32.png" sizes="32x32">
favicon更多深入要点,这篇文章有所讲解,过了这村就没这店,可以进入见见世面。
三、素质三连,本文小结
本文一点小技巧,内容不长很短小;生怕嫌水被人笑,打油诗才凑热闹。
本文到此不多言,相逢到此即是缘,欢迎转发与留言,祝你八月赚大钱。
本文为原创文章,欢迎分享,勿全文转载,如果内容你实在喜欢,可以加入收藏夹,永不过期,而且还会及时更新知识点以及修正错误,阅读体验也更好。
本文地址:https://www.zhangxinxu.com/wordpress/?p=8827
(本篇完)
- 详细介绍HTML favicon尺寸 格式 制作等相关知识 (0.747)
- Web referrer策略详解与防盗链图片的显示 (0.230)
- 本地MP3封面图、时长等信息的JS读取 (0.198)
- HTML5 localStorage本地存储实际应用举例 (0.153)
- zSlide-基于CSS3/HTML5演示文档jQuery插件 (0.153)
- 翻译:清除各个浏览器中的数据研究 (0.153)
- 突破本地离线存储5M限制的JS库localforage简介 (0.153)
- 如何使用JS检测用户是否缩放了页面? (0.153)
- 又get到了,JS复制图片到剪切板 (0.141)
- HTML rel属性值释义大全 (0.132)
- HTML elementtiming属性初体验记录 (RANDOM - 0.017)
因为就是恶作剧,到处打游击,所以DevTool的Override一开,一直开一直爽……
我开发环境网页 title 开头是【开发环境】xxx ,更高效。
鑫哥牛逼
转型rap了吗
打油诗,真湿!
skr skr
js的有么?比如vued的或者react
ayo everybody在你头上暴扣!
本地,测试环境,是比较容易弄错,反应得快还好,反应得慢还是挺浪费时间的,哈哈
你看这个favicon它又大又圆
吴亦凡退出群聊
很棒
厉害了,旭叔
建议安装 website-ip 的[浏览器插件](https://chrome.google.com/webstore/detail/website-ip/ghbmhlgniedlklkpimlibbaoomlpacmk) 直接显示ip 减少因为缓存分不清环境的带来的困扰
有很多网友留言说想看favicon,今天鑫哥手里就有一套favicon代码,别问落地价,因为知识无价.
这篇文章有声音why?
读完我会rap信手来!
原来这错你也会去犯,
大神是人也吃白米饭!
UP!强行打油
押韵很强。前几天也犯了同样错误,弄错线上和测试环境。
押韵666
打油诗好评