查看: 1311|回复: 12
收起左侧

[网络] 这两行微信公众号上的css代码有什么不一样

[复制链接]
xzykgc4mc3
发表于 2018-12-9 20:17:40 | 显示全部楼层 |阅读模式
本帖最后由 xzykgc4mc3 于 2018-12-12 17:41 编辑

不大会描述。这两行css代码(可能不是叫css代码),是我在微信公众号上的文章图文排版样式,我通过电脑端浏览器用f12查看样式找下来的。
结果第一个样式,在手机端微信查看,点击图片,可以弹出大图。
第二个样式,是不会弹出大图的。
请问是样式里哪个参数锁定了。

其一

里面的图片被我用*号代替,保护隐私。
实现效果如下。中间主体图被我打码。保护隐私
  1. <section style="width: 100%;"><section style="text-align:right;"><section style="width: 8em;height: 8em;border-radius: 100%;border-color: rgb(113, 176, 199);border-style: dashed;border-width: 1px;display: inline-block;margin-bottom: -5em;"></section><section style="text-align: left;margin-right: 5px;"><section style="width:88%;display: inline-block;"><section><img class="" data-ratio="0.5640625" data-src="https://*/640?wx_fmt=jpeg" data-type="jpeg" data-w="1280" style="display: block; width: 100% !important; height: auto !important; visibility: visible !important;" _width="100%" src="https:*/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1" crossorigin="anonymous" data-fail="0"></section></section></section></section></section>
复制代码


其二
实现效果如下图。中间圆圈是主体图,打码。
  1. <section style="text-align: center;padding-top:1em;"><section style="display: inline-block;"><section style="display: flex;justify-content: flex-start;margin-bottom: -3.8em;"><section style="width: 120px;"><img class="" data-ratio="0.5555555555555556" data-src="https://*png" data-type="png" data-w="180" style="transform: rotate(-3deg); width: 100% !important; height: auto !important; visibility: visible !important;" _width="100%" src="https://*?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1" crossorigin="anonymous" data-fail="0"></section></section><section style="margin: 0px auto;padding: 5px;border-color: rgb(110, 175, 119);border-style: solid;border-width: 1px;border-radius: 100%;"><section style="background-position: center;margin: 0px auto;border-radius: 100%;border-radius: 50%;width: 240px;height: 240px;overflow-y: visible !important;background-image:url("https://*=jpeg");background-repeat: no-repeat;background-size: cover;"><br><br></section></section><section style="display: flex;justify-content: flex-end;margin-top: -3.5em;"><section style="width: 120px;"><img class="" data-ratio="0.5555555555555556" data-src="https://*=png" data-type="png" data-w="180" style="transform: rotate(-185deg); display: inline; width: 100% !important; height: auto !important; visibility: visible !important;" _width="100%" src="https://*=png&wxfrom=5&wx_lazy=1&wx_co=1" crossorigin="anonymous" data-fail="0"></section></section></section></section>
复制代码



另一个具体例子
来源  微信文章 请回答,2018 | 这一年你忘了的,我们帮你标记
在手机端微信阅读链接,点击图片可以跳出大图

  1. <img class="" data-copyright="0" data-ratio="0.6650943396226415" data-s="300,640" data-type="png" data-w="1060" style="visibility: visible !important; width: 677px !important; height: auto !important;" data-src="https://mmbiz.qpic.cn/mmbiz_png/pNbHtxoJF2icP08zg77wrMHzqrZMEnww86xhNzTiaYbZbV1yYW0ZYSHicDdhr7R0b0KwlKxD3EW1gVZHOpiccujNSA/640?wx_fmt=png" _width="677px" src="https://mmbiz.qpic.cn/mmbiz_png/pNbHtxoJF2icP08zg77wrMHzqrZMEnww86xhNzTiaYbZbV1yYW0ZYSHicDdhr7R0b0KwlKxD3EW1gVZHOpiccujNSA/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1" crossorigin="anonymous" data-fail="0">
复制代码


同一篇文章里,点击图片不会跳出大图

  1. <section style="white-space: normal;box-sizing: border-box;"><section class="" style="box-sizing: border-box;"><section style="margin-top: 10px;margin-bottom: 10px;font-size: 32px;box-sizing: border-box;"><section style="margin: auto;padding: 8px;width: 5em;height: 5em;border-radius: 100%;box-shadow: rgb(204, 204, 204) 0px 5px 5px;background-color: rgb(255, 255, 255);box-sizing: border-box;"><section style="width: 144px;height: 144px;border-radius: 100%;background-position: 0% 0%;background-repeat: no-repeat;background-size: 100%;box-shadow: rgb(0, 0, 0) 0px 0px 0px;background-image: url("https://mmbiz.qpic.cn/mmbiz_jpg/pNbHtxoJF2icP08zg77wrMHzqrZMEnww8vxicWDqAnfnIDmibydrnvMNmSGkZAtsCBOEiaE7hDTW3Liaac5bodicu31Q/640?wx_fmt=jpeg");box-sizing: border-box;"><p style="margin-right: 8px;margin-left: 8px;width: 144px;height: 144px;overflow: hidden;line-height: 0;box-sizing: border-box;"><img data-ratio="1.5" data-type="jpeg" data-w="640" style="opacity: 0; box-sizing: border-box; visibility: visible !important; width: 144px !important; height: auto !important;" class="" data-src="https://mmbiz.qpic.cn/mmbiz_jpg/pNbHtxoJF2icP08zg77wrMHzqrZMEnww8vxicWDqAnfnIDmibydrnvMNmSGkZAtsCBOEiaE7hDTW3Liaac5bodicu31Q/640?wx_fmt=jpeg" _width="144px" src="https://mmbiz.qpic.cn/mmbiz_jpg/pNbHtxoJF2icP08zg77wrMHzqrZMEnww8vxicWDqAnfnIDmibydrnvMNmSGkZAtsCBOEiaE7hDTW3Liaac5bodicu31Q/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1" crossorigin="anonymous" data-fail="0"></p></section></section></section></section></section>
复制代码

想问下,到底哪个属性决定了不会跳出大图。

@jasake @随便注册 @emCupid

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
emCupid
发表于 2018-12-12 17:35:17 | 显示全部楼层
看了半天没搞明白你要表达什么
xzykgc4mc3
 楼主| 发表于 2018-12-12 17:46:18 | 显示全部楼层
emCupid 发表于 2018-12-12 17:35
看了半天没搞明白你要表达什么

是这样的。我经营着个微信公众号。所以需要些图片排版的样式。
所以上面的代码都是我在其他微信文章里,通过浏览器查看元素,找到的样式。
结果我发现第1、3个样式,最后在手机端微信上查看,点击图片,可以跳出大图。像我上面新补的图
但第2、4个样式,点击图片,是不会跳出大图片的
我想请问下,能否通过上面的样式代码,找出哪个是决定能跳出大图的参数。
第2个例子,是微信公众号 三联生活周刊 的一篇文章 请回答,2018 | 这一年你忘了的,我们帮你标记
emCupid
发表于 2018-12-12 18:18:28 | 显示全部楼层
xzykgc4mc3 发表于 2018-12-12 17:46
是这样的。我经营着个微信公众号。所以需要些图片排版的样式。
所以上面的代码都是我在其他微信文章里, ...

初步看来不你说的弹大图是因为点击没有作用到图片上,直接被其他元素档在前面模拟的+背景图上了。

评分

参与人数 1人气 +1 收起 理由
xzykgc4mc3 + 1 感谢解答: )

查看全部评分

ELOHIM
发表于 2018-12-12 18:50:43 | 显示全部楼层

重点在这:这都是样式,可能大概或许没有一个是事件。

鲁鲁,你经营着两个什么公众号,可以私信我说一下吗。

评分

参与人数 1人气 +1 收起 理由
xzykgc4mc3 + 1 鲁鲁是什么

查看全部评分

随便注册
发表于 2018-12-12 19:15:17 | 显示全部楼层
点击查看大图是js干的,本帖就有啊,表情图点击就没反应。如果不是挡住了,就只提取1的<img……>这一段,替换到2看看。
格式化下
http://tool.oschina.net/codeformat/html
xzykgc4mc3
 楼主| 发表于 2018-12-12 19:58:42 | 显示全部楼层
随便注册 发表于 2018-12-12 19:15
点击查看大图是js干的,本帖就有啊,表情图点击就没反应。如果不是挡住了,就只提取1的这一段,替换到2看看 ...

但是这串样式不是表情图,里面的图片是大图
https://mmbiz.qpic.cn/mmbiz_jpg/pNbHtxoJF2icP08zg77wrMHzqrZMEnww8vxicWDqAnfnIDmibydrnvMNmSGkZAtsCBOEiaE7hDTW3Liaac5bodicu31Q/640?wx_fmt=jpeg


  1. <section style="white-space: normal;box-sizing: border-box;"><section class="" style="box-sizing: border-box;"><section style="margin-top: 10px;margin-bottom: 10px;font-size: 32px;box-sizing: border-box;"><section style="margin: auto;padding: 8px;width: 5em;height: 5em;border-radius: 100%;box-shadow: rgb(204, 204, 204) 0px 5px 5px;background-color: rgb(255, 255, 255);box-sizing: border-box;"><section style="width: 144px;height: 144px;border-radius: 100%;background-position: 0% 0%;background-repeat: no-repeat;background-size: 100%;box-shadow: rgb(0, 0, 0) 0px 0px 0px;background-image: url("https://mmbiz.qpic.cn/mmbiz_jpg/pNbHtxoJF2icP08zg77wrMHzqrZMEnww8vxicWDqAnfnIDmibydrnvMNmSGkZAtsCBOEiaE7hDTW3Liaac5bodicu31Q/640?wx_fmt=jpeg");box-sizing: border-box;"><p style="margin-right: 8px;margin-left: 8px;width: 144px;height: 144px;overflow: hidden;line-height: 0;box-sizing: border-box;"><img data-ratio="1.5" data-type="jpeg" data-w="640" style="opacity: 0; box-sizing: border-box; visibility: visible !important; width: 144px !important; height: auto !important;" class="" data-src="https://mmbiz.qpic.cn/mmbiz_jpg/pNbHtxoJF2icP08zg77wrMHzqrZMEnww8vxicWDqAnfnIDmibydrnvMNmSGkZAtsCBOEiaE7hDTW3Liaac5bodicu31Q/640?wx_fmt=jpeg" _width="144px" src="https://mmbiz.qpic.cn/mmbiz_jpg/pNbHtxoJF2icP08zg77wrMHzqrZMEnww8vxicWDqAnfnIDmibydrnvMNmSGkZAtsCBOEiaE7hDTW3Liaac5bodicu31Q/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1" crossorigin="anonymous" data-fail="0"></p></section></section></section></section></section>
复制代码



随便注册
发表于 2018-12-12 20:50:40 | 显示全部楼层
卡饭靠的图片属性中的zoomfile,表情图没有这个属性就不会点击放大
https://a.kafan.cn/static/1/forum_viewthread.js?EaB

但是不知道微信检测的哪个属性,CSS代码也看不出来。你先排查是不是挡住了,再用替换法看哪个影响了判断,甚至img上级标签的属性、有哪些上级标签都可能会影响。

评分

参与人数 1人气 +1 收起 理由
xzykgc4mc3 + 1 感谢解答: )

查看全部评分

neil_aug
发表于 2018-12-13 10:04:04 | 显示全部楼层
也可能本身图就不大
xzykgc4mc3
 楼主| 发表于 2018-12-14 20:39:34 | 显示全部楼层
随便注册 发表于 2018-12-12 20:50
卡饭靠的图片属性中的zoomfile,表情图没有这个属性就不会点击放大
https://a.kafan.cn/static/1/forum_ ...

请问,怎么排查是否挡住了
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

手机版|杀毒软件|软件论坛| 卡饭论坛

Copyright © KaFan  KaFan.cn All Rights Reserved.

Powered by Discuz! X3.4( 沪ICP备2020031077号-2 ) GMT+8, 2024-3-29 04:46 , Processed in 0.132681 second(s), 18 queries .

卡饭网所发布的一切软件、样本、工具、文章等仅限用于学习和研究,不得将上述内容用于商业或者其他非法用途,否则产生的一切后果自负,本站信息来自网络,版权争议问题与本站无关,您必须在下载后的24小时之内从您的电脑中彻底删除上述信息,如有问题请通过邮件与我们联系。

快速回复 客服 返回顶部 返回列表