Layout breaks on higher zoomlevels / lower Window-width
-
It's actually the same thing with youtube! Recently designers apparently stopped thinking about people who use zoomlevels in browsers.
Reproduction: Use Firefox (TRWTF) -> go to what.thedailywtf.com -> press Ctrl + "+" a whole lot -> try to change your preferences.
You can also just make your browser-window smaller.
Expected Result: The scrollbar at the bottom should be able to also scroll the Header (ember982)
Actual Result: Header is not scrollable and content is pushed out of bounds.Bonus: If you press Ctrl + "+" too often you can't even minimize the reply. But that would be an edgecase could overlook, really!
BonusBonus: It actually scrolls on this tab if I hide the "Create a Topic"-dialog. It does not on the other tab with the main-forum-view open!
-
General expectation is for a site to work at +1 and -1 zoom, maybe 2 if you are feeling extra generous. Beyond that, it is anyone's guess.
-
that makes sense, but it's just the easier way of visualizing it. The way I actually found out was by not having Firefox at Fullscreen but tagged to the side (so more like a halfscreen maybe). That way I can actually do stuff while browsing.
Since you do already have a mobile version (apparently) and as far as I remember there are these weird CSS-conditions for window-width I just thought I'd mention this.
It's not game breaking but I think it's worth looking into.Especially with the BonusBonus of it sometimes doing the right thing (also srolling the header)
Filed Under: Minor Bugs also have the right to be discovered!
-
I use Firefox with the undoubtedly superior text-only zoom, and I descry not the el breakingness, even at Ludicrous Zoom.
-
Tangentially related, on iPhone when I zoom in, the header gets disproportionately larger and crowds out the page content. Is there some JS voodoo to keep the header at the same scale?
-
max-height and max-width? I don't have an iDevice to test on, but I'm assuming that good ol' CSS will do
Filed under: today's kids and their Javascripts
-
Eh, something like this://In document ready, assumes jQuery using $ var startWidth = $(window).outerWidth(); $(window).on("resize", function() { $(".d-header").css("zoom", parseFloat($(window).outerWidth() / startWidth)); });
There's a jitter when it applies the new style, and I can't say with certainty how it works on mobile devices (could only quickly test on Chrome on a desktop). It's quick and dirty, and assumes you come in starting at 100%.Doesn't work in the iPad simulator, so chances are it doesn't work on a legit iDevice, and likely won't work well on Android.Generally, though, you'd rather disable the zooming for mobile. In cases where you would want to zoom in (images), that's what opening in a new tab/window/whatever is for.
-
Generally, though, you'd rather disable the zooming for mobile.
Oh, really? I find that to be a very useful feature; lets me click on exactly what I want. (The usual way of doing that sort of disabling seems to be to write an app, not to hack around even more with JS and CSS…)
-
The idea being, your content for mobile will be big enough that people shouldn't need to zoom (or at least, shouldn't need to zoom in much), even to click on things.
Of course, mobile platforms should have better UX
for the sites that don't give you that choicein general for this. I noticed something on Chrome on my Droid Maxx (so I don't know if it's device specific, app specific, or an Android 4.4 thing), if I tap and it's ambiguous, it shows a zoomed in area so I can tap again to confirm.I wouldn't exactly call zooming in entirely useful when you have some design that completely shits itself or hoses your attempt to see when you zoom in, but that's not a failing of the feature.
In Discourse's case, adding: `.d-header .contents { min-width:480px; }` or so to the stylesheet would probably help out with the zooming problem some, but you'd probably want to put the same on the body itself.
Filed under: [Hooray for iPhones](#tag), [If there was a counter for "number of ninja edits to a post", this one would say "Stop, please!"](#tag)
-
The idea being, your content for mobile will be big enough that people shouldn't need to zoom (or at least, shouldn't need to zoom in much), even to click on things.
Meh; why should I have to put up with massive text just because you can't accept that different people optimise for different things? I've got loads of pixels and want to normally see lots of page at one. I'll zoom in temporarily when I need to, and then back out the rest of the time. Pinch zoom is awesome.
(Disclaimer: I've yet to try out DC on mobile, as I suspect it'll be a bit of a battery hog still.)
-
why should I have to put up with massive text
Because it's not your website, so it's not your place to say. The designer chose to limit zooming in the tags, and your browser developer decided that is fine.Seriously, though, I'm not a designer. I make things work, I don't make how they look. I see a reason for limiting the zooming for web apps, because it very well will break shit.
I've yet to try out DC on mobile, as I suspect it'll be a bit of a battery hog still.
As far as my perspective goes, yes.
Filed under: [Not specifying my opinion as to whether everything should be more like a web application](#tag), [but no, not everything should](#tag)
-
Generally, though, you'd rather disable the zooming for mobile.
your content for mobile will be big enough that people shouldn't need to zoom
I have poor vision and fat fingers, please don't.
Filed under: By poor vision I mean I see homeless people., It's my superpower.
-
I noticed something on Chrome on my Droid Maxx (so I don't know if it's device specific, app specific, or an Android 4.4 thing), if I tap and it's ambiguous, it shows a zoomed in area so I can tap again to confirm.
It's a general Android Chrome thing.
-
-
Refer to
@ChaosTheEternal said:it's not your website
and read this as directed to you
@dkf said:so fuck you.
Filed under: I was planning on doing a bad car analogy here, but before I got to this post I got an email from Apple rejecting an app this morning, rejected because we supposedly didn't supply a demo account even though we did clearly in the fields they specified to, indecisive if this is worse than the time they rejected it because they couldn't log in when they kept putting the password in the username field, your yearly subscription is not paying for quality reviewers, and now, for some reason, Markdown hyperlinks don't work for me after a <hr> tag
-
General expectation is for a site to work at +1 and -1 zoom, maybe 2 if you are feeling extra generous. Beyond that, it is anyone's guess.
That's not very friendly to vision-impaired users.
-
This depends on your definition of "work". Extreme zoom can work but may require a bit of jiggling.
-
Two levels of zoom work fine here with Chrome, but I've got a HighDPI screen and that helps a lot keep the L&F similar (since it's effectively zoomed a lot already).