Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Two lines of CSS that will improve HN on mobile (IMO)

tdinh.notion.site

Post reply on HN
Print view View original

11–20 of 163 posts

Re: Two lines of CSS that will improve HN on mobile (IMO)

#11

Post by mdp2021 »

frenkel wrote: post #4

I just zoom in to 115% on iOS and 120% in Firefox on my desktop computer.

The issue in the article was about finger clicking on links.

On a desktop OS, you should not have issues using pointer devices. (On mobile devices, when using fingers to tap, one normally pinches to enlarge and re-pinches to adjust size... Although I am not really sure if this still works with nowadays' mobile software: I am assuming text reflow, being that strictly required, and last time I checked most implementations in browsers were broken.)

For comfort in readiing, on a desktop OS, one is supposed to quickly adjust the zoom level with [Ctrl]+[Wheel], or [Ctrl]+[+/-] or similar...

Re: Two lines of CSS that will improve HN on mobile (IMO)

#13

Post by JOhnnyD03 »

A bookmarklet like this one could also be used as a quick fix - but I know it's not very practical in the long run because it has be called on every page reload:

javascript:(()=>document.querySelectorAll('.comhead').forEach(e=>{e.style.fontSize='12pt';e.style.lineHeight='20pt'}))()

Re: Two lines of CSS that will improve HN on mobile (IMO)

#14

Post by p410n3 »

yawaworht1978 wrote: post #2

Ok, but there are also other css things I would like to add on mobile, but how can I do this without a console, do I need an extension like grease monkey?

Bookmarklets.

At least the work on mobile chrome. You open a site, then tap the url bar and type the name of the bookmarklet and tap that.

I have one that removes all iframes, getting rid of 90% of ads

Re: Two lines of CSS that will improve HN on mobile (IMO)

#15

Post by switch007 »

JOhnnyD03 wrote: post #13

A bookmarklet like this one could also be used as a quick fix - but I know it's not very practical in the long run because it has be called on every page reload: javascript:(()=>document.querySelectorAll('.comhead').forEach(e=>{e.style.fontSize='12pt';e.style.lineHeight='20pt'}))()

Hilariously you can’t see this full snippet on mobile safari.

Re: Two lines of CSS that will improve HN on mobile (IMO)

#16

Post by noahtallen »

mdp2021 wrote: post #11
frenkel wrote: post #4

I just zoom in to 115% on iOS and 120% in Firefox on my desktop computer.

The issue in the article was about finger clicking on links. On a desktop OS, you should not have issues using pointer devices. (On mobile devices, when using fingers to tap, one normally pinches to enlarge and re-pinches to adjust size... Although I am not really sure if this still works with nowadays' mobile software: I am assuming text reflow, being that strictly required, and last time I checked most implementati…

iOS safari zoom increases the size of the buttons (like expand/contract), so it’s at least a partial fix

Re: Two lines of CSS that will improve HN on mobile (IMO)

#17

Post by [deleted] »

p410n3 wrote: post #14
yawaworht1978 wrote: post #2

Ok, but there are also other css things I would like to add on mobile, but how can I do this without a console, do I need an extension like grease monkey?

Bookmarklets. At least the work on mobile chrome. You open a site, then tap the url bar and type the name of the bookmarklet and tap that. I have one that removes all iframes, getting rid of 90% of ads

[deleted]

Re: Two lines of CSS that will improve HN on mobile (IMO)

#18

Post by creshal »

switch007 wrote: post #15
JOhnnyD03 wrote: post #13

A bookmarklet like this one could also be used as a quick fix - but I know it's not very practical in the long run because it has be called on every page reload: javascript:(()=>document.querySelectorAll('.comhead').forEach(e=>{e.style.fontSize='12pt';e.style.lineHeight='20pt'}))()

Hilariously you can’t see this full snippet on mobile safari.

And Chrome strips the `javascript:` prefix before pasting. I guess to make it harder for attackers to trick clueless users into running JS on their online banking?

Re: Two lines of CSS that will improve HN on mobile (IMO)

#19

Post by chrismorgan »

lordofgibbons wrote: post #3

Its annoying that alt+left-arrow is broken on that site. Instead of taking the browser back, it just selects some random part of the page.

With notion.site, they basically went out of their way to break everything for viewers: they give you what I presume is their editor (which clobbers a lot of the browser’s normal functionality, though whether it does a good job of it or not I can’t tell, never having used it), but with most of the editing functionality clumsily disabled. The end result is a bit better than it was a year and a half ago (https://news.ycombinator.com/item?id=23925461; the links and contenteditable parts have been mostly fixed), but still extremely bad, and still painfully keyboard-inaccessible (Up/Down do their own wonky thing that does let you navigate, but roughly by paragraph, and PageUp/PageDown/Space/Shift+Space/Home/End do nothing; but I just discovered that if you click on the page title text, then Up/Down start to do nothing and PageUp/PageDown/Space/Shift+Space/Home/End work).
Post reply on HN