No replies to this topic

[binki]

I do not use this site much. I have just been reading through the English translation of reLIFE. I noticed while reading on my mobile device that:

 

1. The site loads by default in desktop browser emulation mode (no `<meta name="viewport" content="initial-scale=1"/>`).

2. The site heading, navigation, and “Want to see this chapter per page instead?” link have hardcoded widths which increase `<body/>`’s natural width. Having a bigger natural width when desktop browser emulation mode is enabled causes the images to be scaled down by the mobile browser by default because the site’s natural width is wider than the image’s natural width.

3. I can work around this somewhat by pinch zooming and centering the images in the moblie browser. But I have to do this *every* chapter turn. *And*, sometimes when I try to scroll vertically, the mobile device doesn’t always lock the scrolling into veritcal-only mode, making it easy to accidentally off-center the images while reading.

 

Instead, I would love to have the comic load to the device’s width. Apparently reLIFE was written with vertical scrolling in mind, so if it could just be loaded to the device’s width, its text is at a readable size. And if the page’s width equals the device’s width, then accidentally scrolling horizontally is not even an issue to begin with.

 

To work around this for myself, I wrote a small bato.to proxy service. Please only inspect it out of interest, this is not intended to be a public service—and I only used this method instead of userscripts/userstyles because neither FireFoxOS, WP, or Mobile Safari make style alterations easy (no Stylish or userscripts) (I mean, I could use a bookmarklet, but that would require running the bookmarklet every chapter change or basically implementing AJAX chapter loads myself).

 

This service injects rules that hide the site headings (ideally, it would just be made responsive, but that’s actual work) and removes hardcoded widths. It sets the default width of the images to be the device width but then limits the image width to 75% of the viewport height. This latter rule makes it so that you can still see enough of a comic when your screen is in landscape mode or you’re using a desktop to read with—but when you’re using a mobile device with a really tall viewport height, the device’s width defines the image width. You can see before screenshots at http://imgur.com/a/FgSt1and after screenshots/demo of my mobile optimization code (which even helps in the desktop scenario, see the last shot) at http://imgur.com/a/30Ee4 . Source code is http://ohnopub.net/~ohnobinki/anindex/batoto/?src=1 , just drop the query string or see the imgur albums to try the service itself. It’s not very user-friendly unless users are expected to know how to write query strings ;-).

 

If bato.to could move to a more responsive design and support viewing comics like reLIFE on mobile devices by default, that’d be great and much easier for me!