Scrolling your website past the iPhone X’s notch
quirksmode.org
quirksmode.org
So many websites are hostile to or broken in landscape orientation I have come to believe that nobody must use it (other than me.)
E.g. the menu bars ("dickbars") that obscure 50% of the screen in landscape (some of them actually grow bigger in landscape.) E.g. any kind of pop-up that can't be dismissed in landscape. The most hostile is probably the full-screen "rotate your phone" pop-ups, for a regular website.
I know exactly what you mean re: the bars and borders which obscure text, etc in landscape mode. If it gets too bad, I just leave the page.
I use it all the time, even on the desktop, where those elements break PageDown scrolling.
Visibility be damned if you have to type anything on one of those sites. Keyboard covering the rest of the screen real estate not consumed by dickbars (sorry, I never heard that but it's such an apt description).
It's worth doing that only for sites I know I return to. I don't follow any of those sites but many of them are linked many times from aggregators like HN.
I feel a little sorry for the designers and I know I could be missing something but the reading area is more important. Dear designers, how about a button to hide everything but the content? There is reading mode in Firefox but it doesn't work all the times I would need it.
Apart from Netflix and video content, phone operating systems are mostly used in portrait too. So if you're checking email, using the phone or another app, etc. and then go to a browser, you'd have to rotate your phone to get into landscape mode. Even if you optimize it for landscape, it's highly unlikely to be a better experience over portrait. So most people don't do it.
Last time I looked at the overall mobile numbers, landscape and portrait were pretty close as far as usage. But that's including Netflix and other streaming video applications.
When they talk about how much usage native mobile apps have over mobile browser apps/sites they also don't exclude Netflix. That use-case skews the data.
My theory - people that use landscape mode on mobile browsers are above-average consumers of porn (or video in general at least). :)
And images that are wider than they are tall.
Basically a rounded chunk taken out of the left side of my monitor so i can preview what my work will look like.
An optional virtual thumb moving about the screen would enhance the simulation provided we can adjust the skin tone/gender.
The iOS simulator is basically this. It's included with XCode.
Frankly, a screen that isn't rectangluar is awfully weird to me. I wonder if we'll a) all get over it or b) make the sensors smaller to get the rectangular screen back or c) move on to virtualized screens projected from small wearables and forget this whole thing even happened.
Thinking about this also reminds me of the time I found a game controller I physically could not use, because the face buttons were nestled into a little recess. I could only press them about 10% of the way down before my thumbnail clicked against the housing.
I echo the thoughts of others here who simply never use landscape mode.
/badjoke
Edit:
By decent I mean somewhere around 18px, so here between 150% and 175%. I could read at 125%, but while I am it, why not get rid off all the whitespace on the right by zooming and getting even more comfortable.
By perfect eyesight I do mean perfect eyesight in all possible measurements, except reaction speed maybe.
Could you be farsighted? When people say "perfect eye sight" they (typically) mean 20/20 or better, but that's for distance vision. So if you can see things in the distance way better than your friends, that doesn't (necessarily) mean that your up-close vision is great.
(I'm on a 27" 5K monitor, so a good bit larger but not absurdly so, also at arms' length, and while I agree that the font is on the small side it is (to me) crazy huge at 175%).
A reference value above which visual acuity is considered normal is called 6/6 vision, the USC equivalent of which is 20/20 vision: At 6 meters or 20 feet, a human eye with that performance is able to separate contours that are approximately 1.75 mm apart.[4] Vision of 6/12 corresponds to lower, vision of 6/3 to better performance. Normal individuals have an acuity of 6/4 or better (depending on age and other factors).
Huge numbers of senior citizens have 20/20 or better vision but still can't read a computer monitor without reading glasses.
body {
font: 0.8em/145% georgia,times,serif;
font-size/line-height font-family
An Em is a typographical unit that basically means “the current font size”, so it actually nests in CSS/HTML.
Default browser font size tends to be a 16pt pixel equivalent. So in this case this is 80% of that.
Line height is obvious I think, but yeah - it’s in a % of the current font size.
They’re just standard typography syntax (the “size/height” bit anyhow) and units moved into CSS with no change.
https://kyleschaeffer.com/user-experience/css-font-size-em-v...
Now you have a layout that scales with your text!
Well, not black, but whatever background color is defined.
https://webkit.org/blog/7929/designing-websites-for-iphone-x...
Hopefully it wont cause too many other issues though.
The entire status bar area in portrait mode (of which this new notch is a part) should just be treated as “not part of the screen/viewport” at all times. For any scrollable content, this area should be completely avoided in both portrait and landscape orientations.
If not, why?
QuirksMode.org was the best source on the web for most browser DOM events for a decade. It might still be.
Whether they are credible about iPhone X issues, that is TBD.
Peter-Paul Koch is probably the most authoritative source regarding browser quirks outside of browser developers. Don't let a dated website design color your view of the content.