0

0

如何使用浏览器阅读模式获得干净的阅读体验?浏览器沉浸式阅读设置

冰火之心

冰火之心

发布时间:2026-01-13 18:17:25

|

792人浏览过

|

来源于php中文网

原创

阅读模式可提取网页正文并呈现简洁界面:一、启用内置模式,如Edge点“阅读视图”图标、Safari点“AA”按钮;二、调整字体大小、主题及行距;三、手动输入“read://”前缀触发;四、安装Mercury Reader等扩展增强功能;五、移动端通过长按或菜单开启。

如何使用浏览器阅读模式获得干净的阅读体验?浏览器沉浸式阅读设置

如果您在浏览网页时被广告、导航栏或无关内容干扰,浏览器的阅读模式可以提取正文并呈现简洁界面。以下是启用和优化浏览器沉浸式阅读体验的具体步骤:

一、启用浏览器内置阅读模式

现代主流浏览器(如Edge、Safari、Firefox)均内置阅读模式,可自动识别文章主体并移除杂乱元素,仅保留文字与关键图片。

1、在Edge浏览器中打开一篇长新闻网页,地址栏左侧若出现“阅读视图”图标(书本形状),直接点击即可进入。

2、在Safari中加载网页后,若地址栏右侧显示“AA”按钮,点击后选择“进入阅读器”,页面即切换为无干扰布局。

3、Firefox用户访问兼容网页时,地址栏会显示紫色书本图标,单击该图标即可激活阅读模式。

二、调整阅读模式显示参数

阅读模式支持字体、背景色与行距等个性化设置,以适配不同光照环境与视觉偏好,提升长时间阅读舒适度。

1、进入阅读模式后,在页面顶部工具栏找到“字体大小调节滑块”,向右拖动可增大字号。

2、点击工具栏中的“主题切换按钮”(通常为日/夜图标),可在浅色、深色、sepia三种背景间切换。

3、部分浏览器(如Edge)提供“行高调节选项”,选择“宽松”可增加段落间距,缓解视觉疲劳。

三、手动触发阅读模式(当图标未自动出现时)

某些网页因结构复杂或标记不规范,导致浏览器无法自动识别正文,此时可通过地址栏指令强制调用阅读视图。

1、确保当前标签页处于目标网页,将光标定位至地址栏,全选现有URL并删除。

松果AI写作
松果AI写作

专业全能的高效AI写作工具

下载

2、输入“read://”前缀后粘贴原网页URL,例如:read://https://example.com/article。

3、按回车键提交,浏览器将尝试解析该页面并加载阅读模式界面。

四、使用扩展增强阅读功能

原生阅读模式存在兼容性限制,第三方扩展可扩展其适用范围并增加文本朗读、翻译等能力。

1、在Chrome Web Store搜索安装“Mercury Reader”扩展,启用后点击工具栏图标即可对任意页面启动精简渲染。

2、安装“Just Read”扩展后,右键网页空白处选择“Just Read this page”,支持自定义CSS样式注入。

3、Firefox用户可添加“Outline”扩展,它不仅提供阅读视图,还能生成文章结构大纲便于快速浏览。

五、移动端阅读模式快捷操作

手机浏览器受限于屏幕尺寸,阅读模式的触发方式与桌面端略有差异,需依赖特定手势或菜单路径。

1、iOS Safari中,长按地址栏左侧的刷新按钮,弹出菜单后选择“进入阅读器”

2、Android版Edge中,点击右上角三个点图标,从下拉菜单中选择“阅读视图”开关,开启后自动应用到后续兼容页面。

3、在Chrome for Android中,若页面支持,点击右上角菜单→“更多工具”→启用“阅读模式”实验性功能(需开启chrome://flags/#reader-mode)。

相关专题

更多
css
css

css是层叠样式表,用来表现HTML或XML等文件样式的计算机语言,不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

514

2023.06.15

css居中
css居中

css居中:1、通过“margin: 0 auto; text-align: center”实现水平居中;2、通过“display:flex”实现水平居中;3、通过“display:table-cell”和“margin-left”实现居中。本专题为大家提供css居中的相关的文章、下载、课程内容,供大家免费下载体验。

262

2023.07.27

css如何插入图片
css如何插入图片

cssCSS是层叠样式表(Cascading Style Sheets)的缩写。它是一种用于描述网页或应用程序外观和样式的标记语言。CSS可以控制网页的字体、颜色、布局、大小、背景、边框等方面,使得网页的外观更加美观和易于阅读。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

752

2023.07.28

css超出显示...
css超出显示...

在CSS中,当文本内容超出容器的宽度或高度时,可以使用省略号来表示被隐藏的文本内容。本专题为大家提供css超出显示...的相关文章,相关教程,供大家免费体验。

537

2023.08.01

css字体颜色
css字体颜色

CSS中,字体颜色可以通过属性color来设置,用于控制文本的前景色,字体颜色在网页设计中起到很重要的作用,具有以下表现作用:1、提升可读性;2、强调重点信息;3、营造氛围和美感;4、用于呈现品牌标识或与品牌形象相符的风格。

757

2023.08.10

什么是css
什么是css

CSS是层叠样式表(Cascading Style Sheets)的缩写,是一种用于描述网页(或其他基于 XML 的文档)样式与布局的标记语言,CSS的作用和意义如下:1、分离样式和内容;2、页面加载速度优化;3、实现响应式设计;4、确保整个网站的风格和样式保持统一。

603

2023.08.10

css三角形怎么写
css三角形怎么写

CSS可以通过多种方式实现三角形形状,本专题为大家提供css三角形怎么写的相关教程,大家可以免费体验。

559

2023.08.21

css设置文字颜色
css设置文字颜色

CSS(层叠样式表)可以用于设置文字颜色,这样做有以下好处和优势:1、增加网页的可视化效果;2、突出显示某些重要的信息或关键字;3、增强品牌识别度;4、提高网页的可访问性;5、引起不同的情感共鸣。

389

2023.08.22

php与html混编教程大全
php与html混编教程大全

本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

3

2026.01.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

CSS教程
CSS教程

共754课时 | 18.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号