Add viewport meta tag

[KaKi87]

Hello,

When making a userstyle that adds responsive design to a desktop-only website, JS is required to add the viewport meta tag :

const metaViewportElement = document.createElement('meta');
metaViewportElement.setAttribute('name', 'viewport');
metaViewportElement.setAttribute('content', 'width=device-width, initial-scale=1');
document.head.appendChild(metaViewportElement);

Therefore requiring a userscript.

It would be nice for Stylus to be able to add that tag, e.g. using a UserCSS metadata like the following :

@viewport width=device-width, initial-scale=1

In which case such a userstyle wouldn't need to be distributed as a userscript.

Thanks

[saxamaphone69]

I'm curious, why do you need to add that HTML to make it responsive? viewport is used, more or less, to make websites viewed on a mobile/tablet, "zoom" in. AFAIK, it doesn't matter to websites viewed on a desktop. What are you trying that isn't achievable with media queries?

[tophf]

I don't think we should fix sites...

[KaKi87]

Isn't userstyles all about fixing bad UI ?

[tophf]

Stylus only runs userstyles, it doesn't fix sites.

[krystian3w]

Check these if you allow use Tampermonkey:

https://greasyfork.org/scripts/391314-auto-meta-viewport

My hotfix and limit to old.reddit.com only:

// ==UserScript==
// @name           Auto meta viewport
// @namespace      https://github.com/NateScarlet/Scripts/tree/master/user-script
// @description    Use <meta name="viewport" content="width=device-width, initial-scale=1"> as default.
// @version        2222.01
// @run-at         document-end
// @match          old.reddit.com
// ==/UserScript==
function main() {
    if (document.querySelector('meta[name="viewport"]')) {
        return;
    }
    const el = document.createElement("meta");
    el.name = "viewport";
    el.content = "width=device-width, initial-scale=1";
    document.head.append(el);
}
main();

[KaKi87]

That's what I did, if you'd bother to read my original post.

[krystian3w]

Years ago:

• 2015: http://web.archive.org/web/20150819085732/https://drafts.csswg.org/css-device-adapt/#atviewport-rule
• 2020 - 28 August 2022: https://web.archive.org/web/20200508225021/https://drafts.csswg.org/css-device-adapt/#atviewport-rule