苹果公众号推文的图片都点不开,这是怎么弄的?

随便找苹果公众号的一篇推文,大家可以点开看看:《别让它发现,你在守护它。》

版式是很常见的长图无缝拼接,但与其他账号不同的是,这篇推文中的图片是不能点开的,不止这一篇,苹果推文中的图片基本上都是不能点开的,除了底部的二维码,因为二维码就是让人点的。

苹果为什么这么做?

图片不能点开的好处有三:

1.避免打断阅读

一图流就是为用户创造一种沉浸式的环境,让用户阅读时就像坐滑梯一样,不间断的一口气读完。

如果用户在滑动屏幕的时候,不小心点开了图片,很容易破坏内容的流畅性,从而打断阅读。

2.防止隐藏的图片露馅

如果我们在图文中使用某个样式隐藏了一些图片,比如「点击变换图片」中的第2张图片,而用户在该样式之前,恰好点开了图文中的某张图片,然后不自觉地左右滑动屏幕,苦心隐藏的图片岂不是被看到了嘛?

接着用户回到图文继续阅读,看到「点击变换图片」时,按照提示点击变换出来一张刚刚见过的图片,新鲜感必会大打折扣。

3.利于版权保护

就是说文案和图片不易被盗用了,这个就比较好理解了。

苹果将文案设计在图片上,图片又不能直接点击保存,想盗用图片的人虽然也可以截屏,但“门槛”高了,图片质量也会有所下降。

这是怎么做到的?

很简单,秘诀就是嵌入了 Svg 代码:

<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

viewBox="0 0 813 1364" xml:space="preserve" style="display: inline-block;width: 100%;vertical-align: top;background-position:0% 0%;background-attachment: scroll;background-repeat: no-repeat;background-size: 100%;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_png/5ichCnWH60HGd9smcFjPWnZhoibLyyLxqUeqTvOwsO6BxXkbH45wwsHrC8FET59dDdibVf6ZFGrpKLW9ynKyD4Eng/0?wx_fmt=png&quot;);-webkit-tap-highlight-color:transparent;">

</svg>

如果你也想实现图片不能点开的效果,可以复制上方代码至i排版编辑器(iPaiban.com)的 HTML 中,然后替换代码中的图片网址(下图红线所示),并更改图片尺寸(下图红框所示)即可。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容