Skip to content

Align viewport meta with the canonical width=device-width, initial-scale=1 pattern#5609

Draft
bram-atmire wants to merge 1 commit into
DSpace:mainfrom
bram-atmire:fix/5604-viewport-initial-scale
Draft

Align viewport meta with the canonical width=device-width, initial-scale=1 pattern#5609
bram-atmire wants to merge 1 commit into
DSpace:mainfrom
bram-atmire:fix/5604-viewport-initial-scale

Conversation

@bram-atmire
Copy link
Copy Markdown
Member

References

Description

Align the viewport meta tag with the canonical width=device-width, initial-scale=1 pattern used by Bootstrap 5 starters and the Angular CLI default.

Instructions for Reviewers

List of changes in this PR:

  • src/index.html — viewport meta updated from width=device-width,minimum-scale=1 to width=device-width, initial-scale=1.

How to test:

  • On main, the project renders correctly on every modern browser tested. This change is hygiene: it brings the meta tag in line with the documented best-practice and removes a minimum-scale=1 restriction that pinch-zoom-disables on some mobile browsers. Verify the homepage and an item page on a mobile browser still render at 100% on first paint and that pinch-zoom now works without the artificial floor.

This is not fixing a current WCAG failure — see the issue for the full rationale.

Checklist

  • My PR is created against the main branch of code (unless it is a backport or is fixing an issue specific to an older branch).
  • My PR is small in size (1 line of HTML, no logic changes).
  • My PR passes ESLint validation using npm run lint
  • My PR doesn't introduce circular dependencies (verified via npm run check-circ-deps)
  • My PR includes TypeDoc comments for all new (or modified) public methods and classes. (n/a — no TS changes)
  • My PR passes all specs/tests and includes new/updated specs or tests based on the Code Testing Guide. (n/a — index.html only)
  • My PR aligns with Accessibility guidelines if it makes changes to the user interface.
  • My PR uses i18n (internationalization) keys instead of hardcoded English text, to allow for translations. (n/a)
  • My PR includes details on how to test it.
  • If my PR includes new libraries/dependencies (in package.json), I've made sure their licenses align with the DSpace BSD License based on the Licensing of Contributions documentation. (n/a)
  • If my PR includes new features or configurations, I've provided basic technical documentation in the PR itself. (n/a)
  • If my PR fixes an issue ticket, I've linked them together.

…ale=1 pattern

The previous value `width=device-width,minimum-scale=1` worked correctly with
the project's responsive CSS, but diverged from the documented best-practice
shipped by Bootstrap 5 starters and the Angular CLI default. `initial-scale=1`
guarantees the page renders at 100% on first paint across mobile browsers and
embedded WebViews; dropping `minimum-scale=1` removes the unneeded
pinch-zoom-out restriction.

References DSpace#5604
@lgeggleston lgeggleston added improvement accessibility 1 APPROVAL pull request only requires a single approval to merge labels May 4, 2026
@lgeggleston lgeggleston moved this to 🙋 Needs Reviewers Assigned in DSpace 10.0 Release May 4, 2026
Copy link
Copy Markdown
Contributor

@GauravD2t GauravD2t left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @bram-atmire for the updates and fixes. I’ve reviewed the changes and everything looks good. Approving this PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

1 APPROVAL pull request only requires a single approval to merge accessibility improvement

Projects

Status: 🙋 Needs Reviewers Assigned

Development

Successfully merging this pull request may close these issues.

Cleanup: align viewport meta with the canonical width=device-width, initial-scale=1 pattern

3 participants