5 ms·

Equally, I don't like it when websites try to guess what kind of browser I'm in and force me into the mobile experience when I have a window take up half the sc

Equally, I don't like it when websites try to guess what kind of browser I'm in and force me into the mobile experience when I have a window take up half the screen on a 1080p monitor, ... so I guess there's really no easy win for this :(

dorianmariefr 5y ago
I think proper media queries breakpoints solve this
- YetAnotherNick 5y ago
  No, it won't. There is no clear distinction between mobile and tablet first of all.
  - alexchamberlain 5y ago
    Orientation and width not enough?
    - coldacid 5y ago
      When I pin a browser to the left or right side of one of my monitors, these sites will often go into mobile mode despite the fact that the browser is still wide enough that desktop mode works fine, merely because the window is now taller than it is wide. And I find that incredibly annoying.
- mattnewton 5y ago
  This is hard and often done wrong- mobile phones are usually high dpi and have gotten quite large, so it can be hard to distinguish between a large phone and half a desktop screen. Some people get quite annoyed by being bumped into a mobile experience when you resize your window from fullscreen on a laptop.
  - iggldiggl 5y ago
    > This is hard and often done wrong- mobile phones are usually high dpi and have gotten quite large, so it can be hard to distinguish between a large phone and half a desktop screen. A tablet could be easily confused, or a phone in landscape mode, too, but for a phone in portrait mode this seems a bit hard to imagine, because DPI is taken into account when converting the display width into CSS pixels, so even a phone cramming 1080 or 1440 or whatever amount of physical screen pixels into its display width should still come in at something like 300 to 400ish CSS pixels. Or am I misunderstanding something?
    - frosted-flakes 5y ago
      You have it right.
    - mattnewton 5y ago
      You're right, and it's certainly a solvable problem but one that often is not solved correctly is my point. You may have to also introduce a (nonstandard) viewport tag to prevent mobile browsers from laying out the page at a much higher resolution and then zooming/shrinking on you https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_m... If you don't, you may falsely conclude from manual testing that you need large breakpoints for mobile. Also, many times mobile breakpoints don't look at the device orientation and pick numbers like 800px, to capture landscape orientation on medium sized phones or something (I'm not sure where this number comes from to be honest). This obviously breaks the two windows side by side case on laptops but is a top result for me if you google the arcane syntax for how to target mobile browsers with a media query. I am not 100% sure what all the pitfalls are with the current interface, but they exist often enough for me to run into them semi-frequently on smaller laptops.
      - account42 5y ago
        You're goning to need <meta name="viewport" content="width=device-width, initial-scale=1"> tag for any reactive design with mobile browsers since otherwise the site will look completely different between browsers and browser versions as they use different rules for how to render sites. The worst part of this is that simple mostly text sites without a fixed-with layout would look perfectly on mobile if this tag was the default but somehow mobile browser vendors thought it was better to hack around sites with table layouts by giving them a larger viewport (but still inconsitently scale the font sizes so you have to zoom in and out to read different parts).
- zelphirkalt 5y ago
  Even better: Don't have media queries breaking at some arbitraty widths at all, and have a design, which is responsive for all widths without breaking suddenly, orienting size of boxes depending on the content.
  - account42 5y ago
    As soon as you have any kind of columns in your layout you need sudden breaks at some points, explicit or not. I agree that you should prefer flow and size-to-fit but that does not mean that break points are never the right tool.

dorianmariefr 5y ago

I think proper media queries breakpoints solve this

YetAnotherNick 5y ago
No, it won't. There is no clear distinction between mobile and tablet first of all.
- alexchamberlain 5y ago
  Orientation and width not enough?
  - coldacid 5y ago
    When I pin a browser to the left or right side of one of my monitors, these sites will often go into mobile mode despite the fact that the browser is still wide enough that desktop mode works fine, merely because the window is now taller than it is wide. And I find that incredibly annoying.
mattnewton 5y ago
This is hard and often done wrong- mobile phones are usually high dpi and have gotten quite large, so it can be hard to distinguish between a large phone and half a desktop screen. Some people get quite annoyed by being bumped into a mobile experience when you resize your window from fullscreen on a laptop.
- iggldiggl 5y ago
  > This is hard and often done wrong- mobile phones are usually high dpi and have gotten quite large, so it can be hard to distinguish between a large phone and half a desktop screen. A tablet could be easily confused, or a phone in landscape mode, too, but for a phone in portrait mode this seems a bit hard to imagine, because DPI is taken into account when converting the display width into CSS pixels, so even a phone cramming 1080 or 1440 or whatever amount of physical screen pixels into its display width should still come in at something like 300 to 400ish CSS pixels. Or am I misunderstanding something?
  - frosted-flakes 5y ago
    You have it right.
  - mattnewton 5y ago
    You're right, and it's certainly a solvable problem but one that often is not solved correctly is my point. You may have to also introduce a (nonstandard) viewport tag to prevent mobile browsers from laying out the page at a much higher resolution and then zooming/shrinking on you https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_m... If you don't, you may falsely conclude from manual testing that you need large breakpoints for mobile. Also, many times mobile breakpoints don't look at the device orientation and pick numbers like 800px, to capture landscape orientation on medium sized phones or something (I'm not sure where this number comes from to be honest). This obviously breaks the two windows side by side case on laptops but is a top result for me if you google the arcane syntax for how to target mobile browsers with a media query. I am not 100% sure what all the pitfalls are with the current interface, but they exist often enough for me to run into them semi-frequently on smaller laptops.
    - account42 5y ago
      You're goning to need <meta name="viewport" content="width=device-width, initial-scale=1"> tag for any reactive design with mobile browsers since otherwise the site will look completely different between browsers and browser versions as they use different rules for how to render sites. The worst part of this is that simple mostly text sites without a fixed-with layout would look perfectly on mobile if this tag was the default but somehow mobile browser vendors thought it was better to hack around sites with table layouts by giving them a larger viewport (but still inconsitently scale the font sizes so you have to zoom in and out to read different parts).
zelphirkalt 5y ago
Even better: Don't have media queries breaking at some arbitraty widths at all, and have a design, which is responsive for all widths without breaking suddenly, orienting size of boxes depending on the content.
- account42 5y ago
  As soon as you have any kind of columns in your layout you need sudden breaks at some points, explicit or not. I agree that you should prefer flow and size-to-fit but that does not mean that break points are never the right tool.