How do I customize the browser's "Reader View" mode via CSS or Javascript?
All modern web browsers now have read mode available. Is it possible, using CSS and / or Javascript, to tell the browser to automatically use the "Reader View" version on mobile devices with screen widths up to 480px?
I just don't want to create a mobile version of the site as the Reader View version works fine on mobile devices (with 320px-480px screen width).
PS. I am not looking for information when the Reader View icon starts up. I want to force the view mode of the Reader on mobile to have a screen width of less than 480px. In addition, the Reader view mode is available in other browsers (not just Firefox).
source to share
Read about:reader?url=https%3A%2F%2F...
View URL : The url parameter must be URL encoded.
I tried to change the location of the page to this url and got an Access Denied error using Firefox 68.0.1.
I also tried to create a link, it doesn't work without errors. Mozilla seems unwilling to grant access to it.
Instead, you can reuse their implementation, which takes advantage of readability . To run it on mobile only, you can check these questions:
- Responsive CSS on mobile devices only
- What's the best way to detect a mobile device? - this answer, specifically fooobar.com/questions/1086 / ...
source to share