27 ms·

Just because I have a vertical screen doesn’t mean I’m on a phone

• ThePadawan 6y ago
  Just because my horizontal resolution is around 1200, I am not on a tablet. It's amazing how many websites are incredibly unusable when displayed 2-up on my 27" monitor. There's so much screen estate, but I often literally have to resize the window to fullscreen to find a search or login field.
  • MivLives 6y ago
    This is the worst when you're displaying two sites side by side on a 1080p screen.
    • Kuraj 6y ago
      This drives me up the wall. You would think it's such a common scenario!
      • MivLives 6y ago
        It's one of the reasons I have a vertical monitor. 1080 horizontal doesn't seem to trip it.
      • mrweasel 6y ago
        We use a web-based time tracking system that appears to assume that you're either on a device with a touch screen, or have an ultra wide display. You can't easily scroll side to side without touch, so the second best option is full screen on a ultra wide screen, so you don't need to scroll. I long advocated that website started to use the more of the width of the screen on desktops, to avoid unnecessary scrolling. However, I just a frequently have two windows next to each other. There's no real good way of satisfying all use cases, but it generally seems like desktops are being neglected when company design websites. Previously mobile seemed to be hacked on to an existing site, now everyone seems to go the route of: If it's good enough for mobile, it's good enough for desktop users.
    • robertoandred 6y ago
      At what horizontal resolution?
      • t-writescode 6y ago
        960x980. 1920x1080 in half. It’s a regular problem I run in to.
  • iamben 6y ago
    It's a difficult one though - say I have left menu, and a sidebar on the right, and a central column with my copy. Very roughly, at about ~1350px (so neatly displayed on a generic 1440 laptop) I have about 250*2 (500px) for my sidebars, about 800px for my central column, which at a decent font size will give me a 'right-ish' about of words per line, and a few more pixels for gutters. As you start to make that smaller - 1200, 1100, something has to change. We can maybe adjust the font size in the main column, maybe there's some flexibility to shrink the sidebars (but maybe there isn't, because we need an ad in there, and that can't be resized). So we have to adjust - lose a sidebar to a hamburger menu, or change our horizontal menu at the top to include the most clicked links (and not the ten links we have before). Maybe the search bar becomes an icon, because it's more important we push the "Buy Now" button than give people an option to search, etc etc. It's an art - what do people need the most? What will make them convert? What can we remove first? What resolutions are most used, and how do we optimise for that?
    • ThePadawan 6y ago
      I see your point, and I'm not complaining about that. As you point out: > Maybe the search bar becomes an icon (...) I'd already be ecstatic about that. I'm talking about features which are essential to a website that just disappear completely because the owner thinks "no one on a tablet will ever want to use this".
      • iamben 6y ago
        Haha, yes, it's definitely a balancing act! Thankfully analytics and heatmaps are a good start to figuring this out (even without applying common sense fundamentals)!
• naringas 6y ago
  "falsehoods developers believe about screens" ?
  • mhh__ 6y ago
    A collection of deep-deep dives on various topics would be a fun thing for someone who can build a nice website to do (You don't want to see my attempts at being a designer). For example, "What every programmer should know about memory" covers memory but what about (as you say) screens.
    • edent 6y ago
      You might enjoy https://github.com/kdeldycke/awesome-falsehood https://github.com/kdeldycke/awesome-falsehood
  • hombre_fatal 6y ago
    No. Just simple heuristics that work for most users at the expense of people who admit, like OP's opening statement, "I’m a weirdo". Building responsive client UI is hard. In my experience here, the falsehoods HNers believe about clients is that it's somehow not hard. Or just a silver bullet away from being easy (like replacing JS with $faveLang). Or that resources are infinite such that every defect is explained by incompetence (except for, presumably, that HNer who is intimately familiar with resource finitude in their own life).
    • jariel 6y ago
      It's 'hard' largely because the standards bodies and browser makers fail to provide simple and expedient means to do the most basic of operations, making every little thing a designer wants to do a giant hack. For something so universal ... there should be a very clear and unambiguous function call and at least a rational way to move through the fragmentation molasses.
  • patrickaljord 6y ago
    More like testing for an infinite number of resolutions is expensive so developers only test on the main ones and the ones used by hackers on Pop_OS Linux that rotate their screen 90 degrees are out of luck and default to one of the tested resolutions :)
• andreynering 6y ago
  On tablets you face this problem all the time, too. Both on websites and apps.
  • izacus 6y ago
    One of the best features of my Lenovo Chromebook Duet (a 10" ChromeOS tablet) is that it reports itself as a laptop with 1920x1200 screen so you get actually usable webpages and not the mobile crap.
• Stevvo 6y ago
  The proposed solution for developers doesn't work any better; DPI is correctly calculated on desktop, but nearly always wrong on phones. So fixing sites for vertical desktop monitors will break them in most phones.
  • chrismorgan 6y ago
    I’d express it much more strongly than you have: doing what this article suggests is catastrophically wrong. For layout purposes you must not look at physical resolution. Physical resolution should only be used so that you can render on scaled displays at higher quality, e.g. by choosing a higher-resolution image, or by scaling your canvas by devicePixelRatio so you can draw more precise lines. The proposed solution is not just no better, but far, far worse.
• whalesalad 6y ago
  I don’t think this has much to do with your vertical screen as much as it’s the narrow viewport.
  • eznzt 6y ago
    Exactly. CSS does not check that your screen is taller than it is wide. What it sees is a narrow viewport.
    • jkochis 6y ago
      Is that what this is for? https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspe...
      • jefftk 6y ago
        You can query for aspect ratio in CSS, yes. This can be useful for figuring out whether it's better to place something as, say, a sidebar vs a footer. The sites they are complaining about, however, are only looking at the horizontal dimension.
      • Nathanael_M 6y ago
        I think primarily that's for constraining a div's aspect-ratio. Like making sure you have a div that's always 16:9 to hold a video player. I'd be interested in hearing other use cases, though.
        • madeofpalk 6y ago
          No, it's not.
          • Nathanael_M 6y ago
            I'd be interested in hearing other use cases.
• parski 6y ago
  The first DPI detector site detects my 55" 4K monitor as 442 DPI (5120x2880 at 13.3") when entering my resolution and diagonal size in inches gives me 80 DPI. The other one detects it as 192x192 DPI which is a much larger number. Maybe the first number means it should be 80x80 DPI but either way 192x192 is much larger. Maybe I'm missing something.
  • edent 6y ago
    https://dpi.lv/ https://dpi.lv/ is not detecting your screen size. It shows 13.3 as a default. Type in your real size and it will calculate your actual DPI.
• swiley 6y ago
  At least these sites have a desktop oriented UI. Modern Gnome just assumes you're always on a phone (even though the phones capable of running Gnome are still extremely niche.)
  • ficklepickle 6y ago
    Some of that has spilled into Cinnamon DE also. Gedit and vlc(?) both have egregious hamburger menus on my Linux desktop. Sad.
• TeMPOraL 6y ago
  Wait, so sniffing on screen resolution is the way web developers distinguish desktops from mobile? That's just crazy. There should IMO be a preference sent, "I'm on a portable, touch-enabled device". I'm guessing it doesn't exist because it would add a bit to the fingerprint.
  • jefftk 6y ago
    In this case, "portable, touch enabled device" wouldn't match what we're talking about. Someone with a large tablet should receive the version optimized for larger screens. The website is saying "if your screen is at least this big, I'm going to show you the version for big screens". The OP has an unusual setup where their big screen is reporting as a smaller screen.
    • masklinn 6y ago
      > Someone with a large tablet should receive the version optimized for larger screens. Not necessarily, because the “smaller screen” layout tends to be linked to the touch one e.g. larger active targets, while the “large screen” layout is optimised for precise pointing devices (mice) and may be nigh impossible to interact with using fingers.
      • madeofpalk 6y ago
        Well, if you want to change for interactions, we have @media (pointer: coarse) and @media (pointer: fine) for that.
  • bryanrasmussen 6y ago
    the way that web developers generally do responsive design is to use media queries checking the width of the screen they are on, as opposed to the device width. This is the suggested way because if you check the device width you know that they are on a small device and thus probably mobile but your styling changes for small windows (less wide windows) do not get applied, so 'best practice' is to check the actual screen width. Hardly anyone checks the height because for web development height is generally not that important. But this is often not useful because a lot of web solutions style things based on JavaScript and CSS and while the CSS will rerender automatically based on changing the screen size the JavaScript needs to detect you've changed the screen size and then rerender. So then there is a discussion as to how many people really resize the windows and do we need to catch this resize to do a rerender even though doing so is irritating and can be a resource hog (fixable by extra code but maybe better not to code at all!) But there are lots of other ways to detect if you are on a mobile device, you can detect if touch screen events are enabled etc. but then what if you have one of those weird desktops that became possible a few years ago (I nearly wrote popular instead of possible) where your laptop's monitor also has touch screen events. As a general rule it is best to do things based on the capacity of the system, and not by what type of system it is, but as the capabilities of our systems exist in infinite combinations it follows some things will just fall through no matter how exacting you try to be - maybe especially if you try to be too exacting.
• timw4mail 6y ago
  The real problem is that designing for different screen sizes, especially with responsive design, is very difficult. For my personal projects, screen size is the factor used to determine layout. Mobile/tablet/laptop/desktop is irrelevant. My goal with smaller viewports is to make the layout as similar as possible, without the user having to scroll horizontally. Because I don't want to change the layout too much, I do not use hidden navigation menus. Hamburger menus are terrible - I see them as a design copout.
  • deleted 6y ago
    [deleted]
  • Nathanael_M 6y ago
    I'm curious what your menu solution is. I agree hamburger menus besmirch the good name of the hamburger, but for longer menus they feel like at least an acceptable solution.
    • InfiniteRand 6y ago
      I like gear icons, sometimes they don't map to exactly the semantics of what is in a menu, but if there are no other possible menu elements than I know to go to the gear icon. I've become used to the hamburger menu, but it still doesn't catch my eye (Chrome's now three dot option is even worse at this), gear looks noticeably different than the rest of the UI and so I can easily spot it for options.
  • Hendrikto 6y ago
    > Hamburger menus are terrible - I see them as a design copout. I am genuinely interested in why. The only reason I can think of, is that they may me unintuitive, but I think this is becoming less and less of a problem. Hamburger menus are an accepted and pervasive design element. That does not means it’s good design, but it means that users are familiar with the concept. Familiarity goes a long way to ensuring good UX.
    • madeofpalk 6y ago
• newsbinator 6y ago
  Author's proposed solution: var dppx = window.devicePixelRatio; var screenWidth = screen.width * dppx; var screenHeight = screen.height * dppx;
  • thinkloop 6y ago
    dppx always gives me 1
• tartrate 6y ago
  Mobile browsers usually have a "request desktop version" checkbox. How does that work then?
  • masklinn 6y ago
    The mobile browser uses different viewport information (and likely sends a desktop UA string).
  • edent 6y ago
    In my experience, they change the detected width of the viewport. Some also change the User Agent header.
  • deleted 6y ago
    [deleted]
  • asiando 6y ago
    On iOS it just changes the UA. This means that regular CSS-only responsive sites don’t change at all, unlike what the other 2 comments are suggesting. Maybe on Android it’s different.
• vagrantJin 6y ago
  Portrait viewing for screens bigger than tablets are edge cases of edge cases. The rabbit hole is websites are supposed to cater for every screen size by pixel is ridiculous. At some point the user should respectfully use normal orientated/ sized device.
  • deleted 6y ago
    [deleted]
• donatj 6y ago
  I feel like this is a more complex problem to solve than it seems at face value or the author implies, especially considering tablets of varying dpi. CSS dpi media queries are unsupported in Safari mobile and desktop, so that increases the complexity significantly. Beyond that, the fact is most web layout is still done in px or other non-fraction-of-the-width units, so it’s often a matter of the wider layout simply being broken at smaller widths, rather than just refusing the display.
  • simion314 6y ago
    Yeah, I was trying to find a way to create a toolbar with buttons and make sure the buttons are not too small or not too big. DPI info is not present and different tricks to work around this will fail on different phone models. I wish I could ask the browser "what are the dimensions you the browser use for your buttons" so I can use same dimensions too and the user could configure this in his browsers and everything would follow it.
    • jameshart 6y ago
      In theory this is what css { font: caption } should do. There are other font shorthand’s for menu text, icon labels, dialog box text, etc. that should clue you in to how a particular system UI is scaled, if browsers are doing it right. (Of course they also might not because of fingerprinting risk) Note that this is different from { font-family : system-ui } which doesn’t include size information. Caniuse sadly doesn’t have much info on font: caption support.
  • asiando 6y ago
    There’s a good reason why there are no real DPI media queries: You should not decide how big things appear on the screen, that’s up to the user. The user has the ability to change resolution or to change the website’s zoom level, you should never access the real size and decide that a button must be exactly 1cm wide in real life on every screen for everyone. Just design for the default and then people will zoom or change resolution if the default isn’t enough.
    • 6y ago
• avipars 6y ago
  why not use the user-agent?
  • jefftk 6y ago
    The UA doesn't tell you anything about the screen the person is viewing on or the size of their window. If I resize a window on my desktop to 450x1000, showing me the layout for narrow screens is likely the best option.
    • thesuitonym 6y ago
      Perhaps the answer is not to change elements on the website, but to design the site in such a way that it looks good at any resolution. We used to do this before responsive design took over.
      • jefftk 6y ago
        Responsive design is about making the site look good at any size. Can you give an example of the "old way" vs the "responsive design" way?
  • bryanrasmussen 6y ago
    I was going to say because it's been deprecated but then I saw this https://deviceatlas.com/blog/postponed-googles-attempt-deprecate-and-freeze-user-agent-header https://deviceatlas.com/blog/postponed-googles-attempt-depre...
  • madeofpalk 6y ago
    Because a single user agent and present websites at multiple sizes. Consider an iPad which can display a website at three vastly different sizes. Full-width, half-width, and roughly 1/5th width docked to the site. They should have at least two different layouts.
  • Nightshaxx 6y ago
    What if the person is using an Android phone connected to a monitor? As someone said in another thread: you design a view for a screen size not a device.
• thinkloop 6y ago
  Mobile has some unique characteristics that don't fully allow agnostic design, namely: - viewport changes size due to soft keyboard - address bar hides/unhides during scroll down/up For certain types of apps, like games, it's important to know whether a device is actually "mobile" regardless of size/resolution. Sniffing user-agents might have to come back into vogue. Who knows where "mobile browsers" will end up - maybe some giant 60" kiosk app, or other places. Barring that though the article brings up good points and searching the web for how to detect mobile usually brings up the error-prone portrait/landscape resolution detection that the article discusses. The full solution requires the knowing the resolution and the dpi to get an estimate size of screen in inches. At least with that we can be safe until next article "Just because I'm a 100" kiosk app, doesn't mean I'm on a phone". Is there a good npm lib that does the above?
• rho4 6y ago
  I've been using 3 vertical screens side-by-side for years. Like web pages, source code is also long and (usually) not too wide. Being able to see that complete method / function without scrolling is invaluable to me. Square screens would also suit me well, but they don't exist, sadly (apart from very expensive Eizo).My current resolution is 3x 1440 x 2560, so luckily I don't get mobile versions of web pages.
• ericol 6y ago
  Wholeheartedly agree. And this apply not only to vertical. I have a Samsung Tab A Tablet (Model SM-T510) that has better resolution than my notebook (A Lenovo T430). A page that displays very well in the Lenovo (1366x768) displays like crap in the tablet (1920x1200) even when using it in the landspace position.
• jefftk 6y ago
  Sites are not detecting a portrait screen and deciding that they're displaying on a phone. Someone who switches their monitor to portrait, or resizes a window to be taller than it is wide, is still going to get the desktop view. In this case the author is scaling their resolution, and so their browser is presenting itself to sites as 720px wide. Sites see that and show a layout optimized for a screen of that width. Those sites are acting correctly. The author's proposed solution is for sites to use DPI instead, but this would thwart the preferences of users who use scaling because they want the whole site to look bigger.
  • asiando 6y ago
    Agreed completely. One mistake that designers/developers do though is to completely give up under 1000px so we get this swaths of whitespace and a hamburger. That’s a waste of estate and a waste of my time.
    • iamben 6y ago
      Yeah, I still very often get "here is the desktop design, here is the mobile design". Depending on who is developing the designs depends how that's going to translate. I have all the time in the world for developers that reflow the page and remove/adjust elements at different breakpoints (based on the design) between 'desktop' and 'mobile' so the experience is good for everyone. Sadly, most people don't bother.
      • tehbeard 6y ago
        Convincing a client to pay for time to spend checking the design and tweaking it in the space between the breakpoints can be more hassle than it's worth. That said, sane breakpoints can usually avoid unexpected hamburgers on the desktop.
        • dstick 6y ago
          Agreed, Tablet is the only intermediate I consider. The rest is just not worth the time investment.
• georgyo 6y ago
  I just tested all the demo sites on my vertical monitor, and all of them look as the "correct" rendering he wants. Shrinking the viewport so it is toothpick shows me the phone screen view. I don't think they are selecting on aspect ratio alone.
• vehemenz 6y ago
  I think many developers/designers ignore device and dpi detection now. It has become too complicated, and the benefits are too few. @media rules with min-width or max-width is really all you need; just make sure the breakpoints aren't so ridiculous that you serve the "mobile" version of your site to desktop users.
  • sime2009 6y ago
    That still doesn't work very well. I have Firefox on one half of my 1440p monitor and vertical tabs down the left side. Web pages I see are tall and narrow, and many fall back to mobile style controls.
• madeofpalk 6y ago
  I'm kind of confused about this - I'm sure the author experiences real problems, but I wonder if there's something else at play here? I've never actually seen screen aspect ratio media queries used in practice, nor have I really seen them advocated for. When I load www.theguardian.com on my portrait monitor (1441 x 2561) I get the desktop layout https://imgur.com/a/ZpUI95Z https://imgur.com/a/ZpUI95Z Absolutely yes design your breakpoints around screen width. Using aspect ratio seems like a poor choice.
  • asiando 6y ago
    The author is actually complaining about narrow viewports and not about portrait orientations, without even realizing it.
    • madeofpalk 6y ago
      Even then - when I set my resolution to the same 1080 × 1920 the author states, The Guardian still renders the "desktop" layout. The more compact layout from the doesn't kick in until 739px. Maybe it's their font-scaling settings are getting in the way and changing the viewport resolution?
• rob74 6y ago
  Ironically, the author of dpi.lv (https://lea.verou.me/ https://lea.verou.me/) doesn't even bother to have a "desktop-friendly" site. On desktop everything (font, header, images, buttons) is huge and ~50% of the vertical space is wasted. Not the best calling card for someone living "at the bleeding edge of web standards". Or maybe it looks Ok if you view it on a Mac?
  • ourcat 6y ago
    That's the latest WordPress 'twentytwenty' theme I think.
    • rob74 6y ago
      Cool, that's the theme WordPress recommended to use as default in 2020? Maybe I should ask them to buy me a Hi-DPI monitor... that would display a bit more content, but actually I'm afraid the lonely column of text in the middle of the screen would look even worse.
  • polytely 6y ago
    It looks fine on mobile to me, scrolling is free, and filling 100% of the screen with information has nothing to do with if a person is "at the bleeding edge of web standards".
    • rob74 6y ago
      That's my point, it looks (probably?) great on mobile, but on desktop it's a mess. Maybe that's what they mean by "bleeding edge" - only that it's the eyes of some of the users doing the bleeding...
  • Xevi 6y ago
    Holy cr*p, that website consumes 30% CPU in Chrome for me. Scrolling lags like hell. Please revoke their web dev license.
• SeeManDo 6y ago
  You know you do it just to look L337...
• ChrisRR 6y ago
  As with every engineering project, there's always a point where you have to look at how few people are within a certain use case and decide it's not worth the effort to cater for them As a vertical PC user, you're in the vast minority, and you can't really be surprised that people don't want to spend the extra time (and money) developing to support your edge case
  • _trampeltier 6y ago
    On work, I know a couple of people who use vertical screens (including me). At home I have a large 43" 4K monitor (no scaling). A lot of websites think it would be something like a 23" 4K monitor and everything on the website is super large. As rule of thumb, as more fancz the website is, the more is the website broken if you don't use just a 08/15 monitor.
  • jiofih 6y ago
    His problem is not really the vertical screen, but that he is virtually scaling the monitor down to 720px wide.
• superkuh 6y ago
  In the past I'd respond: just because I have javascript disabled doesn’t mean I’m on a phone. But unfortunately developers have dropped supporting HTML completely for even older cell phones. There's no more mobile.twitter.com that serves HTML for example.
  • nyuszika7h 6y ago
    If you set your user agent to Googlebot, you can still access the legacy desktop site, but only when logged out.
• MisterBastahrd 6y ago
  If a client asks for it, I'll do it. Otherwise the use case for people with vertically oriented non-phone screens is so tiny that it isn't worth the effort. What are we realistically talking about here? One in twenty thousand, if that?
• g3e0 6y ago
  I feel like I must be missing something, because I don't understand this author's point at all. "Lots of websites think “Vertical Screen == Mobile User”!" No, they don't - They think a 720px wide screen is a tablet user, which is probably a fair assumption. I could equally write "Just because I browse zoomed in 500% doesn't mean I'm on a mobile" When you zoom in, things get bigger, so fewer of them will fit on the screen... You have a choice between horizontal scrolling, or the website showing you the version of itself designed for smaller viewports. Looking at the "How it should render" screens - I just checked the Guardian site, and that is exactly how the website looks at 1080px wide. The author admits that because of their zoom solution they are running at an effective width of 720px, so maybe just.. don't do that?? The proposed solution doesn't seem to solve anything, because physical size of the screen isn't the full story, it also depends on how far away from the screen the user is - which the browser can never know.
  • TazeTSchnitzel 6y ago
    Hell, the sites may just think it means the user has a narrow window. And that's reasonable. A nice thing about the responsive web is you can have a small browser window and it should work.
  • t-writescode 6y ago
    They don't even think that. I have one 1920x1080 monitor and one 1440p monitor. On both monitors, I regularly make it so that each screen is used by 2 applications. A lot of websites think 960x980 is mobile. *half* of a 1080p screen. It's bad and a huge assumption on their part that their website should only be seen in full-screen mode, or half of some 4k screen when the most popular resolution is ignored in a productivity usage.
    • hinkley 6y ago
      To expand on this, my work responsibilities often but don't exclusively involve monitoring logs or graphs, and usually I have one monitor dedicated to this. My goal is to encourage myself to look at it every time I remember to do so, and greasing the wheels means tiling windows so I don't have to touch anything. I'm peeking at them like my rear view mirrors. If I haven't set up a vertical monitor, that's two browsers with half the screen (or 55% with some clever overlapping to clip margins). If I got around to rotating my display, that's could be a portrait window or still only 1100 pixels wide.
• egypturnash 6y ago
  The “solution” he gives for website devs is to “stop naively using screen resolution”. But the thing is, an iPhone 12’s resolution is 2532‑by‑1170-pixel at 460 ppi - bigger than his 1080×1920.
  • jaywalk 6y ago
    The iPhone doesn't report it's "real" resolution, though.
    • egypturnash 6y ago
      His method of taking reported resolution and multiplying by window.devicePixelRatio is designed to work around exactly that.
  • edent 6y ago
    Sure, but the viewport resolution is only 390px wide. https://useyourloaf.com/blog/iphone-12-screen-sizes/ https://useyourloaf.com/blog/iphone-12-screen-sizes/
  • egypturnash 6y ago
    And of course realistically he is probably seeing sites with breakpoints built entirely on min-width/max-width, which gives the size of the browser canvas. The Guardian, for instance, has a lot of "@media (max-width: 71.24em)" in its CSS. Screen height? Zero fucks given. I turned my desktop monitor to portrait and I can change between desktop and phone versions by shrinking my desktop window and/or changing the font size. Which feels like a perfectly sensible way to tackle the problem if you are coming from a place where you are thinking in typography. eat.co.uk? Tons of "@media print, screen and (max-width: 768px)". Screen height? What's that? popsci.com? A lot of "@media screen and (max-width: XXXpx)", where XXX varies a lot - every number is different, the lowest is 325px and the highest is 1720, someone's been thinking about a lot of edge cases in that layout. ---- The fundamental problem of "I am getting the mobile site on my desktop" still applies, but his theories as to why are wrong. Really I feel like he is sitting in the middle of a very small edge case. Not many people use portrait screens on their desktop. And of those people, how many are bumping the effective resolution by changing the scaling? Finding a solution that can work properly for him, and not fuck things up for people with failing vision (and maybe even run afoul of accessibility laws by doing that) is gonna be a lot of work for very little return, and he should just bump his font size down a little and live with that, or do some CSS injection on every single offending site if he has a lot of time to blow on this.
• jordache 6y ago
  the author must be aware that his use case (vertically oriented monitor) is such an obscure demographic, that almost no company will invest in time to optimize this experience. His complaining about this situation is pure self-centered arrogance. There is effectively zero benefit of optimizing for this use case.
• AzzieElbab 6y ago
  Carl- is my friend
• patriarchybad 6y ago
  most websites dont work well on small screens because of the modern ui with all of the extra spacing this issue affects women particularly because we have smaller hands and so use smaller screens its yet anther example of how tech designed for men keeps women out of tech, a vicious cycle material design is perpetuating internalized misogyny edit: and of course my comment is dead thats the kind of behavior tolerated on the angry orange site edit 2: i am formatting this comment to a narrow width to be more friendly to smaller screens especially those used by women edit 3: i now realize that my comments exclude trans women who may have larger hands there was no transphobic intent in my remark simply that since trans women are a smaller segment of women women on average have smaller hands
• therealmarv 6y ago
  Hm, designed a bunch of websites and never tested for vertical desktop screens. Seems there is failproof solution missing there for recognizing tablet, desktop and mobile. Btw. many websites break also on quadratic screens ;)
• Robotbeat 6y ago
  I wish for once that requesting “Desktop version” on my phone would actually give me a desktop view, not the same exact mobile view. Sizing based on viewport (a “responsive design” principle that I hate) gives me hamburgerized unusable mess. I want to be able to zoom out to see the same page features as I would see on desktop. A lot of websites USED to work this way on ios Safari before “responsive design” became a thing. Now, there’s no way to get a typical website to give you a desktop-like layout when you “zoom out” because it automatically detects your viewport and forces you to hamburger no matter that you selected “Desktop version.” I understand why mobile view exists. It’s more comfortable to read for probably most people. But by ignoring “request desktop site” because of the hubris of “responsive design,” it means that there’s no way for you to get desktop-like functionality & experience on your phone browser. That is a reduction in functionality from the smartphone experience of 5-10 years ago on many site that’d give you a desktop-like layout if you zoomed out. An example of this frustration is that on a forum I frequent, if the viewport is below a certain size, user avatar thumbnails are hidden and text tables of values are all reflowed to an unusable mess where before I could zoom out and get a desktop-like view where the tables (which are just fixed-width straight text, entered by forum users) could be seen clearly. The refusal to allow some way to get a real desktop-like view in “responsive design” is user-hostile.
  • jorams 6y ago
    One of the things "Request desktop site" is supposed to do is report a larger effective viewport. For a responsive site, that should switch it to a desktop view. Does iOS Safari not do that?
    • Robotbeat 6y ago
      Good question. Now that you mention it, I do not know if the problem is on iOS Safari or the website. EDIT: I just tried it on HN (which is usable enough for me as-is, I’m just using it as a test), and it seems my effective viewport remained unchanged.
• qwerty456127 6y ago
  How do they know it's your screen which is vertical, not just a window?
• rhacker 6y ago
  Takeaway: I need to start using units like Inch, Pt, mm instead of pixels.
  • chrismorgan 6y ago
    No. All of those units are defined in terms of CSS pixels. 1in = 25.4mm = 72pt = 96px
    • rhacker 6y ago
      Well that's just useless then.
      • chrismorgan 6y ago
        There have been attempts to define physical units (Firefox used to have a unit called mozmm which tried to be one physical millimetre), but eventual consensus is that (a) you can’t actually figure this out, because screens don’t tell you their exact physical sizes; (b) if it’s not accurate, there are exactly zero genuine use cases for it; and (c) even if it was accurate, it would still almost never be correct to use it. Remember that you don’t know the viewing distance, either—letters being 5mm high is all very well twenty centimetres away, but at four metres it’s utterly illegible.
        • rhacker 6y ago
          Good points. I guess there is more to all of this than I originally figured.
• kuon 6y ago
  I think the most important factor is not really screen resolution or size, but "cursor precision". I'm fine with HN on mobile, but it is really hard to press the buttons with my large fingers on a mobile screen. But much easier on a 800x600 monitor using a ball mouse. For HN I don't really mind, as a pinch to zoom. To check for touch, there is `Navigator.maxTouchPoints` but this might backfire on some laptop which have touch screen (which you usually use for drawing rather than UI, but your mileage may vary). But I think the core issue is much earlier in design. Many websites and app have complicated design/UI while it could be simpler, and they split their UI into mobile and desktop very early in the design process, which leads to two very different version. And while I agree that mobile and desktop are different experience, I think you can keep them close in term of UI and UX. For example, let's say you want tooltip, on desktop this is a normal UI control which is natural, but on mobile it is not, so instead of using tooltip on desktop and "think of something" when doing the mobile version, we need to design early for both. Today, many website and apps are designed with a "mobile first" mindset, and this cause problem when used on desktop. The solution is not better detection of either platform, but better design to keep them as close as possible. Of course, there is also the issue of scaling text vs scaling the whole site, and this is not very well handled by many website, even with the "let's use em/rem units".
• lmilcin 6y ago
  Welcome to globalization. Some people try to implement fancy heuristics that fails for some users but not enough to care to fix.
• awillen 6y ago
  As a product manager, my immediate response is... not worth the time. You've chosen to have a unique setup, which is fine, but your use case represents some absolutely miniscule fraction of users. On top of that, it's not even that websites are unusable, just that they're not ideal. When you decide to do weird/special/unique stuff, don't expect the world to adapt to you. You can rotate your monitor back or live with it. The idea that companies should spend engineering/QA/PM resources to deal with this is... vain.
  • marssaxman 6y ago
    You don't need to rotate your screen; just shrink your browser. I know that lots of people like to use fullscreen windows, but that makes me feel claustrophobic; text ought to be formatted in narrower columns for comfortable reading, so I like narrower browsers. This often fools websites into sending me the phone layout, which is unhelpful and annoying.
    • NeutronStar 6y ago
      So what's your solution? How do we differentiate between a tablet user and someone who decided to shrink their windows?
      • ironmagma 6y ago
        Copying from elsewhere in this thread: `@media (pointer: coarse)`
        • capableweb 6y ago
          Don't think that's quite right either. Pointer coarse would just refer to the device used for pointing. Using a tablet with a mouse would be "pointer: fine" but it's still a tablet. As always, the issue isn't black and white. There is no solution that always works, because it depends on what you're targeting. If you want to scale elements to be easier clickable for people who might devices where it's harder to click/tap accurately, then "pointer: coarse" makes sense. If you're thinking about scaling elements on the website, some other solution fits better. Which one? Again depends on what you're aiming for.
• darkerside 6y ago
  To quote the great Dave Chappelle, "Just because I am dressed this way... does NOT make me a WHORE"
• aasasd 6y ago
  Browsers should provide to websites the user's (typical) distance to the eye, and preferred zoom level. Maybe also the preferred type of input, to tell mouse users from finger users. Obviously pixel count and screen ratio is complete nonsense, in this almost-glorious day of sweet variety of gadgetry. It will only become more of a nonsense, until we all switch to neural interfaces. But since designers only have what CSS&JS provide, they cling to the pixel count and DPI, choose a font size according to someone's eyesight, and stick to that. This is bogus, and leads to fonts from something like two mm in height (ahem HN cough) to almost a centimeter, so I either have to stick my nose to the phone screen, or hold the phone at a full arm length and scroll like mad. And browser zoom is no help in this model. Meanwhile, in the real world, all that matters is the visual angle of the font or image, and the user's eyesight. The first is dictated by the distance from the screen, and the second determines how much the content must be zoomed in from the perfect-vision scenario. In fact, since I wouldn't want the content to grow and shrink when I move my arm somewhat or lay back in the chair, perhaps devices could use some default visual-angle values according to their form-factor and typical usage, then adjust for the user's chosen zoom level, and report only one value to websites: either preferred visual angle, or zoom level from some global anchor value—whichever of the two is better to use for calculations. With this info, the screen's pixel resolution affects only one consideration: whether a given line of text or other content would fit in the screen horizontally at the preferred visual ratio—or it must be broken or scrolled.
• viseztrance 6y ago
  I can relate. Sometimes I'm browsing a page, and zoom in (control+) to make the text larger. But then the webpage switches to its mobile view. So it seems like we've broken desktop accessibility in favour to the mobile one.
• dmitrybrant 6y ago
  Just a quick note about a very prominent user of vertical screens: Professor Martyn Poliakoff, known for the Periodic Videos channel (which I highly recommend). https://www.youtube.com/watch?v=Oy8ZMFXS_5E https://www.youtube.com/watch?v=Oy8ZMFXS_5E
• myfonj 6y ago
  His proposed solution -- measuring screen size in physical display points -- is futile. He writes it directly in his article: > My monitor’s native resolution is [w × h device pixels]. But I find the fonts slightly too small at that resolution – given how far I sit from the screen. [So I use DPI scale factor R, what] translates to an effective screen resolution of [w/R × h/R virtual (CSS) pixels]. (In his case it is 1080 × 1920 / 1.5 = 720 × 1280). Measuring screen dimensions in physical display points, like var dppx = window.devicePixelRatio; var screenWidth = screen.width * dppx; var screenHeight = screen.height * dppx; reveals nothing about your preferences and conditions. The moment he decides to get another second vertical monitor and put both just a bit farther he will be back on the square one. You may have super tiny device with super high density display close to your nose, look at a screen on opposite side of your room that can have same density (what would be a bit wasting resources, but anyway) or look at super large billboard screen across the road. Until the page will know exactly: - how far is the screen from eye of its observer, - observer's eyesight conditions, - and observer's perceived visual size preferences, there will be no way to solve virtual pixel problem the way that will make everyone happy. (And that's quite OK, I think.)
• sleepybrett 6y ago
  user agent?
• jiofih 6y ago
  > that can leave some sites too small to read properly. I need to zoom out the page Well, then all I can say is that the CSS breakpoint is doing its job perfectly. It switches to layout you can read at this (emulated) screen size. There is nothing to fix.
• joshxyz 6y ago
  I did that vertical monitor orientation before, it's honestly odd and a little hilarious trying to read long threads starting from top of screen and reaching the bottom screen.
• aimor 6y ago
  I remember learning how to get my site to display decently on different screen sizes. I got an abridged history of past attempts: "handheld" CSS media type, then media features "device-height/width, resolution, pointer, orientation, aspect ratio", some people try to use the User Agent, others target a huge list of specific device resolutions, webkit has a device pixel ratio?, it all seemed like a huge mess. Then it turns out the solution isn't CSS it's the HTML "meta" tag: <meta name="viewport" content="width=device-width, initial-scale=1.0"> On top of that I use media queries to respond to the font size. @media (max-width: 35rem) I'd love to know if there's a better way, but this has been pretty good for me.
  • ficklepickle 6y ago
    Nope, you pretty much nailed it. That meta tag is crucial. If you were mobile-first, you'd use min-width media queries rather than max-width.
• adenozine 6y ago
  What's a nice way to say "Who cares? Nobody does this" ?
• deleted 6y ago
  [deleted]
• peanut_worm 6y ago
  Aren't CSS breakpoints usually based on width and not orientation? I have always done it based on width. The width of the window is probably dropping below a breakpoint when he reorients the screen.
• ping_pong 6y ago
  I have 3 monitors. Once of them is portrait mode because it's easier to read longer posts and articles this way. I've never had such a problem as described by the blog post, but my resolution doesn't drop to 720px like the author. Scaling the size of fonts has always been discouraged, even by Windows. I used to use larger fonts on Windows way back and it would mess up the spacing of many apps, because it's just so uncommon. I fought against the wind for years and gave up.
• aruncis 6y ago
  And no one is talking about neck problems.
• ohazi 6y ago
  Forget the arguments about counting pixels for a moment... Mobile browsers have a "request desktop site" switch that seems to work pretty reliably, even though the viewport is still tall. Yet when I tile my browser to the left or right of my giant 4k display, I frequently get a mobile site with text that you can read from across the street. Is there a way to jusr get a "request desktop site" switch that performs the same magic on my desktop browser?
• munk-a 6y ago
  It would be really nice if there was something in the browser header to indicate whether 1) The user had a touch interface and 2) The user had a persistent on-screen cursor (both may be true) but, leaking that information also opens the door for more accurate browser fingerprinting so I guess, once again, we can't have nice things because of advertising.
• invalidtaxonomy 6y ago
  Some sites go as far as to assume that I’m on mobile because my user agent says ARM. I’m getting a mostly blank page on amazon unless I’m changing arm to x86_64 in my user agent string, then it magically becomes usable.
  • ryandrake 6y ago
    That's both sad and hilarious! It reminds me of the rumor[1] that Microsoft had to go from Windows 8 to Windows 10, skipping 9, because too many clueless developers were grepping the version string for "Windows 9" in a flawed attempt to detect the Windows 95 and Windows 98 operating systems. 1: https://www.pcworld.com/article/2690724/why-windows-10-isnt-named-9-windows-95-legacy-code.html https://www.pcworld.com/article/2690724/why-windows-10-isnt-...
• nacho2sweet 6y ago
  I read this and go "these fools are like ~1% of my visitors?? I don't care lmao".
• KarlTheCool 6y ago
  I think the bigger problem is the design pattern of "mobile-mode vs desktop-mode". The document isn't meant to escape hatch on size, individual elements are.
• jeroenhd 6y ago
  > I have tried “Fractional Scaling” – it works OK on Wayland, but leaves all the fonts looking soft and fuzzy. Ah, there we go. The real, underlying problem is that the scaling that would make this problem go away doesn't work for you. Scaling the fonts instead of fixing the underlying issue and then deciding that all of web development is wrong for optimising for CSS pixel count (like one should) instead of manually doing DPI calculations (which everyone gets wrong, very often, and probably Javascript just to do a basic layout) is a silly solution. Look for a blurry-font-rendering solution instead of a change-the-way-everyone-develops-websites solution, it's a lot easier to convince people that it's a real problem.
• deleted 6y ago
  [deleted]
• idonotknowwhy 6y ago
  Similar issues here since working from home on my 19 inch CRT. Easy solution, hold ctrl and scroll down with the scroll wheel. That zooms out a bit and the websites pop back to normal again. Had similar issues with the crosshair in halo reach on PC, it was an oval instead of a circle. Luckily they fixed it a few months ago.
• grincho 6y ago
  Width-based media queries are simply a corrupt idea altogether. In addition to the problem complained noted in the post, they give rise to other pathological behaviors I encounter daily. I increase the zoom of a page to better see an image, only to have the image shrink due to a layout change. I shrink a window to remove a huge empty margin, only to have the text recede even further. They way they're implemented in browsers, width media queries are a UI antipattern. They violate the principle of least astonishment because their boundaries are invisible, causing the user to be surprised every time.
• Wistar 6y ago
  It is common for serious users of time-line-based animation and compositing software as well as layer-based software such as Photoshop and Illustrator to use one display in portrait for the timelines and layers. I know I do. I have tried using it for web-viewing, especially to find media assets such as stock footage and typefaces but usually have to move the browser to portrait because the sites usually don't display correctly on portrait.
• matheusmoreira 6y ago
  People also assume phone users only hold it vertically. Most popular apps don't even allow landscape orientation. They can't even cope with varied screen sizes and orientations. I've actually found bugs when I forced them to try via split screen view.
• fouuler 6y ago
  Syntax error.
• mixmastamyk 6y ago
  I've had a second portrait monitor for about 15 years now, and highly recommend it. I don't have many issues possibly due to my screens being 4k. However, the responsive decision point is regarding the width of the viewport or window. To my knowledge sites don't care about the height at all. So the fact it is in portrait orientation (vertical) is not pertinent. Once in a while I do have to zoom or resize the window if its size is not large, but it is not a burden that I really notice.
• StillBored 6y ago
  I think he is totally doing this wrong, firefox has a zoom text option (that was the default years ago). https://support.mozilla.org/en-US/kb/font-size-and-zoom-increase-size-of-web-pages https://support.mozilla.org/en-US/kb/font-size-and-zoom-incr... That keeps the layout/images/etc the same, while bumping the font px/em.
• cosmodisk 6y ago
  Many years ago, when I was a little kid in dark 90s,my dad was picking up some cargo from the country's largest dairy company at the time. So we end up walking through the narrow passages of the production line and eventually end up at the account sitting in front of her very modern PC with a vertical screen!It wasn't even tilted,it was made that way! I looked at it and it looked so impressive. It took many years for me to see again someone using a monitor like that.
• marvindanig 6y ago
  This is an excellent post. I wrote about the new landscape of the web [1] a few weeks ago and how responsive web design is a complete failure in addressing that. There are so many fallacies! 1. Tablet != mobile. 2. Mobile != Watch. 3. Desktops can be in portrait mode. 4. EV Cars like Tesla Model 3/S are closer to tablet than desktop. [1] https://bubblin.io/blog/the-new-landscape-of-the-web https://bubblin.io/blog/the-new-landscape-of-the-web
• astrea 6y ago
  "I have a very unique setup that isn't catered to by every website on the internet and I have no real solution for this."
• jzer0cool 6y ago
  Sounds like a quick hack from developers. I'm guessing here maybe some fluid, generalized mobile design for a vertical layout. When developing for front-end I like to simply see how my layout may look generally with a horizontal / vertical view but with a responsive layout in mind and not necessarily mobile resolution. I could see how someone might put in a quick, unideal hack and do a scaled to fit. I'm curious how often people are seeing this as I don't have a vertical monitor setup anymore.
• slowwriter 6y ago
  Look, I don’t think it’s unreasonable to assume that a 720px wide device is a phone. As a webdev I completely zoned out when he started talking about DPI and such. Nobody is going to completely change their methodology around breakpoints because of like a .01% edgecase, when the current one works great the remaining 99.99% of the time. The reason I consider this a true edgecase is that he combines a vertical orientation of the monitor with scaling. That is just bound to cause problems. Had the width been 1080px most websites would at least have given him the tablet layout, which would be more usable on a desktop monitor.
• panny 6y ago
  Just because I have an ARM processor doesn't mean I'm on a phone too.
• eyelidlessness 6y ago
  I appreciate this pain in the exact opposite way! Just because I’m on a wide (or big) screen doesn’t mean I’m browsing with a wide window! I’m the guy throwing off your resolution stats if you do analytics, I do all my non-phone computing at a desk with a 42” 4K screen @1x. As in: - My available pixels suggest HiDPI, but that’s wrong - My browser window is probably twice as tall, and half as wide, as you think The worst I usually encounter gratefully is bad scroll position content disclosure (sites designed to show or transition content on scroll assume a certain height and don’t even check, or mistakenly assume I’m looking at a different header than I am). I’ll say it’s actually hard to accommodate my use case. I built a site that uses scroll position to progressively present content and my own browser window was harder to accommodate than any other (at this time on a 27” monitor with the same pixel density before 4K/5K was common). Regression testing the more common screen/window choices was a huge slog. It’s almost definitely such a weird set of circumstances that almost no site would bother. I don’t blame them. It’s very challenging and very unlikely to be your visitor who needs it.
• CGamesPlay 6y ago
  This post makes it sound like this is an issue that could only possibly affect 1 user, the one guy with a vertical screen running Linux with a nonstandard scaling factor. But I have the same problem (worse, even). I run a bog-standard MacOS w/ Safari machine and but I browse the web at 1.25x and I don't maximize my browser window. That also punts me into the "you must be a tablet" bucket, except I don't have the luxury of 1280 vertical pixels! The real problem here is actually that developers make sure their site looks reasonable at the phone and desktop breakpoints, but it's rare that someone specifically designs for the "tablet" breakpoint. Quick examples: - https://pkg.go.dev/net/http https://pkg.go.dev/net/http this website is terrible to use at the tablet breakpoint, the main content is literally pushed below the fold for me - https://neutrinojs.org/installation/ https://neutrinojs.org/installation/ they threw away the right-hand and left-hand navigation so that they could make a page that is much too wide to read comfortably - https://developer.mozilla.org/en-US/docs/Web/API/Window/alert https://developer.mozilla.org/en-US/docs/Web/API/Window/aler... they throw away the left-hand navigation and replace it with whitespace on the right-hand side These examples aren't particularly "rude offenders", this is just par for the course.
• CMYKninja 6y ago
  I have one vertical one horizontal QHD it’s the perfect setup. It’s time to dump 1080p.
• andredz 6y ago
  Up until a few days ago I wasn't aware of the existence of https://www.popsci.com/tags/science-confirms-obvious/ https://www.popsci.com/tags/science-confirms-obvious/ and now I see it everywhere (https://news.ycombinator.com/item?id=25989234 https://news.ycombinator.com/item?id=25989234 and an image in this article).
• nroets 6y ago
  Some websites look and / or work better on phones. Feature request to web browser developers: My screen is horizontal. I want a menu option to open twin windows, side by side, each taller than it's wide. Then emulate a mobile web browser in each.
• dybber 6y ago
  I have the same problem, not because I have a vertical screen setup, but because I usually split my screen in two parts. I rarely have a website open in full screen, as I'd rather have a chat-window/terminal/editor/other browser window open in the other half.
• blacklight 6y ago
  @media screen and (max-width: 768px) and (orientation: portrait) { /your mobile CSS here/ } Come on UX designers out there, don't be lazy and remember to always include the max-width/min-width attributes in your @media queries :)
• FrozenVoid 6y ago
  use vw/vh/vmin/vmax not pixels. It scales to any type of screen, it doesn't require media queries and doesn't leave 50% of page blank.
• godshatter 6y ago
  I don't understand why websites don't place a button on mobile views that let the user switch to desktop view and vice-versa. That way if you guess wrong at least there is an avenue to get the correct view without messing with window sizes and monitor resolutions. Save the choice and they only have to correct the website once.
• Triv888 6y ago
  I was just using my browser in half-screen mode on reddit and I got this: https://i.imgur.com/z5Sb7Mj.png https://i.imgur.com/z5Sb7Mj.png ... my screen is a bad resolution ~37in TV...