Align viewport meta with the canonical width=device-width, initial-scale=1 pattern#5609
Align viewport meta with the canonical width=device-width, initial-scale=1 pattern#5609bram-atmire wants to merge 3 commits into
Conversation
lgeggleston
added
improvement
accessibility
1 APPROVAL
GauravD2t
left a comment
GauravD2t
left a comment
There was a problem hiding this comment.
Thanks @bram-atmire for the updates and fixes. I’ve reviewed the changes and everything looks good. Approving this PR.
…itial-scale=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.
…x/5604-viewport-initial-scale # Conflicts: # src/app/item-page/full/field-components/file-section/full-file-section.component.html
alexandrevryghem
force-pushed
the
fix/5604-viewport-initial-scale
branch
from
5cd46bd to
ed28f8e
Compare
|
I went over these changes and noticed that this change had some side effects on small mobile devices, because that old viewport metadata tag automatically hid the overflowing sections. I've pushed some CSS changes that should fix these issues. To test this open the dev tools and on the inspect element tab you need to select a small mobile device in the dimension dropdown. NOTE: don't use the responsive dimensions but use for example "Galaxy Z Fold 5" Verify that no other pages have overflowing text/images/... like this: (Since I also made some modifications to this PR, I removed my request to review the changes) |
4 participants
References
Description
Align the viewport meta tag with the canonical
width=device-width, initial-scale=1pattern 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 fromwidth=device-width,minimum-scale=1towidth=device-width, initial-scale=1.How to test:
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 aminimum-scale=1restriction 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
mainbranch of code (unless it is a backport or is fixing an issue specific to an older branch).npm run lintnpm run check-circ-deps)package.json), I've made sure their licenses align with the DSpace BSD License based on the Licensing of Contributions documentation. (n/a)