在Mobile网页上模拟iOS Safari的阅读模式

2016/10/30 18:10 于 随笔 3

iOS的Safari上有一个很好用的功能 - 阅读模式 (Reader Mode)。当网页的排版不适合手机阅读时,点一下地址栏左侧的阅读模式按钮,就能获得舒适的阅读体验。

比较阅读模式和一个为手机优化的图文混排网页,可以发现,在阅读模式下,所有图片的宽度都沾满屏幕,而文字距屏幕的边界都有一定的空间。

而常规的图文混排网页中,我们一般是把图文放在同一个容器里。这就导致图片的宽度为100%时,仍然只能达到文字段落的100%宽度,无法做到阅读模式下图片宽度满屏而文字段落保有边界的效果。

那么,为了在移动网页上模拟阅读模式的显示效果,我尝试写了一段基于jQuery的javascript。思路就是把需要占满屏幕的图片提取出来,重新插入到中,设置其width为100%,position为absolute,top位置与原图一致,并且重新计算并调整原图的高度以避免图片之后的文字被新插入的图片遮挡。

效果还不错:

当然,如果有纯css的解决方案是最好的。可惜网络搜索了半天,并没有前例可循。且当抛砖引玉吧。

js核心代码:

$("img").each (function () {
    var imgOrigWidth = $(this).width();
    var imgURL = $(this).attr('src');
    var imgOrigHeight = $(this).height();
    var imgTop = $(this).offset().top;
    var imgNewHeight = imgOrigHeight / imgOrigWidth * imgNewWidth;
    $(this).attr('height', imgNewHeight);
    $('body').append('<a href="'+imgURL+'" target="_blank"><img src="'+imgURL+'" style="position: absolute; top:'+imgTop+'px; left:0; width:'+imgNewWidth+'px" class="readerImg"></a>');
});

网页safari

发表评论
已登录为 [退出]


User
Vxx
2016/11/17 08:08
Thx~
User
bobshen
2016/11/10 14:53
需要截断的地方输入三个加号。+++
User
Vxx
2016/11/02 05:58
请问“阅读更多”这个摘要的功能是如何实现的……?谢谢。