Content deleted by creator due to lemmy.ml tolerating brigades from hexbear

  • Kevin@programming.devEnglish
    27·
    1 year ago

    I remember facing this once on a site, so i peeked at the source. Turns out they have an event handler for the pinch gesture, preventing the browser from doing its usual zoom

  • fiat_lux@kbin.social
    19·
    1 year ago

    First of all, why would they want to do this? It seems like an empty spiteful gesture that profits them in no way and, if anything, prevents people from using their site.

    It is unfortunately a very old legacy workaround for CSS scaling problems in some browser device combinations. It has historically been difficult to convince stakeholders they’re actively hurting their user base. Thankfully, the law in many places is catching up.

    Here is what you likely want to remove, if you know how to edit the HTML: <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    Old explanation: CSS Tricks

    Edit: if you encounter this though, odds are the rest of the site will be pretty hostile to your needs as well though.

      • fiat_lux@kbin.social
        7·
        1 year ago

        Luckily for you, html does not need to be compiled and your built-in browser inspector is all you need to start messing with any webpage. Deleting a single line and setting what happens is a great way to start too.

        I see you’re a Firefox user, if you go to your shitty URL on desktop, right click somewhere on the page and select “Inspect Element”, a new window/docked window will pop up. (Or open the Inspector using a different method. This is the HTML and CSS page viewer and editor. One pane will have your highlighted/inspected element HTML. Ignore the element you highlighted, and scroll up to the big chunk of <meta> tags near the top of the HTML document - that’s where you’ll likely find the source of your pain, somewhere between the opening and closing <head> tag. There should be a search box nearby in the UI you can use to do that. When you find the tag you want to change, right click on it (or otherwise open the context menu) choose Delete Node, and see if that has improved your zoom experience.

        Mobile is a bit trickier but it can still be done in Firefox… I think.

        Anything you edit won’t survive a page refresh or navigation to a new page though. Which is good, because you can’t actually ruin anything and can mess around deleting things on whatever page you want to your heart’s content.

        It’s not the only technique used to stop zooming, sadly, so no guarantees. But it is a common technique that’s very easy to work around in a few seconds, and can lead to hours of fun. And strangely, entire careers.

          • fiat_lux@kbin.social
            2·
            1 year ago

            Yeah that one will only let you look, you need the Inspector tools secret magic to make viewable changes on the fly.

              • fiat_lux@kbin.social
                2·
                1 year ago

                Huh, thankyou for introducing me to Eruda, this is a nice looking tool. I wouldn’t install it as a plugin just for this, but luckily you don’t need to. Do not use this tool on any page where you’re entering information or viewing private info though, these are dangerous powertools and allowing plugins to do arbitrary JS evaluation is like not using a safety guard.

                This should work though:

                1. Make a new bookmark on mobile Firefox
                2. Paste as the location: javascript:(function () { var script = document.createElement('script'); script.src="https://cdn.jsdelivr.net/npm/eruda"; document.body.append(script); script.onload = function () { eruda.init(); } })();

                This loads Eruda scoped to that tab only from their CDN, which hopefully limits possible damage it can do.

                Here is what you need Eruda to do: const naughtyMetaTag = document.head.querySelectorAll('meta[name="viewport"]'); !!naughtyMetaTag ?? naughtyMetaTag[0].setAttribute('content', '');

                It will fail silently if it doesn’t find the tag with the name viewport, otherwise it will empty the contents of it and you’ll be able to zoom.

                The much safer alternative is to use Android’s built in accessibility zoom functionality for this specific task though, to be honest.

                Edit: on second thought, we can avoid Eruda altogether for this task. I haven’t tested this at all but try bookmarking this instead javascript:(function () { const naughtyMetaTag = document.head.querySelectorAll('meta[name="viewport"]'); !!naughtyMetaTag ?? naughtyMetaTag[0].setAttribute('content', ''); })(); and visiting it when on a bad page. Much safer and worth trying first.

  • exohuman@programming.dev
    17·
    1 year ago

    Honestly, most web articles are only worth reading in reader mode. It seems like that is the only setting that respects your phone’s brightness settings (dark or light) and font size.

  • AnonymousLlama@kbin.social
    7·
    1 year ago

    I still occasionally run across the odd dodgy website that tried to disable zooming (along with other oddities like trying to disable right clicking on desktop) and it feels honestly that most of these annoyances come about because some asshole in the company (the CEO, lead designer, marketer, whatever) sees any changes to their websites from the user as “ruining the experience”, disregarding the whole concept of accessibility in the modern web

  • Knusper@feddit.de
    61·
    1 year ago

    They have this in their webpage header:

    meta name=“viewport” content=“initial-scale=1.0, maximum-scale=1.0, user-scalable=no”

    Not sure, if the Firefox toggle ignores all of that. They might have further non-sense preventing zoom.

    In principle, zooming is kind of tricky for web designers.

    When using pinch-to-zoom (touchscreen, touchpad), it should be no problem, as browsers then generally just scale up everything. The webpage may request to be as wide as the screen, but the browser will just display things wider than the screen and not tell the webpage about it.

    On a desktop, when using the traditional zoom or even text-only zoom, that’s when things become tricky. Suddenly, different measures on your webpage grow at different rates. The text that previously fit into 5cm width may now be cut off or reflowed.

    In particular, when zooming their desktop page, you’ll see that the header grows comically large. And since they’ve fixed it to the top, the webpage becomes unusable.

    In essence, there’s three things they could do:

    • Allow pinch-to-zoom, disallow other zoom.
    • Fix their stupid header and whatever else may be broken. It’s not that hard.
    • Throw away the whole webpage and start fresh. Browser were built to display documents and this page wants to display documents. The most basic webpage will work better than what they’ve built.