github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-24 11:41:11 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

DEV: Make interactive-widget viewport config chrome-only (#30889)

Browse Source 
This stops it printing an error to the console in Safari
This commit is contained in:
David Taylor 2025-01-21 09:46:18 +00:00 committed by GitHub
parent 4933cfd46c
commit db998ee1ab
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 33 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/assets/javascripts/discourse/app/instance-initializers/safari-viewport-setup.js
View File

@ -1,20 +0,0 @@
/*
In iOS Safari, setting user-scalable=no doesn't actually prevent the user from zooming in.
But, it does prevent the annoying 'auto zoom' when focussing input fields with small font-sizes.
*/
export default {
initialize(container) {
if (!container.lookup("service:capabilities").isIOS) {
return;
}
const viewport = document.querySelector("meta[name=viewport]");
if (viewport) {
const current = viewport.getAttribute("content");
viewport.setAttribute(
"content",
current.replace("user-scalable=yes", "user-scalable=no")
);
}
},
};

31
app/assets/javascripts/discourse/app/instance-initializers/viewport-setup.js Normal file
View File

@ -0,0 +1,31 @@
let done = false;
export default {
initialize(container) {
if (done) {
return;
}
done = true;
const caps = container.lookup("service:capabilities");
const viewport = document.querySelector("meta[name=viewport]");
if (!viewport) {
return;
}
let value = viewport.getAttribute("content");
if (caps.isIOS) {
// In iOS Safari, setting user-scalable=no doesn't actually prevent the user from zooming in.
// But, it does prevent the annoying 'auto zoom' when focussing input fields with small font-sizes.
value += ", user-scalable=no";
}
if (!caps.isSafari) {
// Safari prints a big red warning because it doesn't support this property.
// Add it for all other browsers.
value += ", interactive-widget=resizes-content";
}
viewport.setAttribute("content", value);
},
};

3
app/views/layouts/_head.html.erb
View File

@ -8,7 +8,8 @@
<%- end %>
<%= discourse_theme_color_meta_tags %>
<%= discourse_color_scheme_meta_tag %>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes, viewport-fit=cover, interactive-widget=resizes-content">
<%# viewport is updated further in instance-initializers/viewport-setup.js %>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
<%- if Discourse.base_path.present? %>
<meta name="discourse-base-uri" content="<%= Discourse.base_path %>">
<% end %>