Skip to content

Commit 8ce814b

Browse files
Prevents small viewports in non-touch devices from zooming in
Ref #24585 When the browser window on a desktop is resized to a small viewport, this fix ensures that the zoom behaviour is disabled. Zoom continues to work in tab viewports in non-touch devices.
1 parent 951f91b commit 8ce814b

2 files changed

Lines changed: 12 additions & 7 deletions

File tree

ghost/admin/app/components/gh-unsplash-photo.js

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,6 @@ export default class GhUnsplashPhoto extends Component {
4848
this.height = this.width * this.args.photo.ratio;
4949
}
5050

51-
get isTouchDevice() {
52-
return window.matchMedia('(pointer: coarse)').matches;
53-
}
54-
5551
@action
5652
select(event) {
5753
event.preventDefault();
@@ -62,13 +58,16 @@ export default class GhUnsplashPhoto extends Component {
6258
@action
6359
zoom(event) {
6460
const {target} = event;
65-
const isOverlayButtonClick = GhUnsplashPhoto.OVERLAY_BUTTON_SELECTORS.some(selector => target.closest(selector));
61+
const isOverlayButtonClick = GhUnsplashPhoto.OVERLAY_BUTTON_SELECTORS.some(selector => target.closest(selector));
62+
const isMobileViewport = window.matchMedia('(max-width: 540px)').matches;
63+
const isTouchDevice = window.matchMedia('(pointer: coarse)').matches;
64+
const shouldNotZoom = isMobileViewport || isTouchDevice;
6665

67-
if (this.isTouchDevice && isOverlayButtonClick) {
66+
if (shouldNotZoom && isOverlayButtonClick) {
6867
return;
6968
}
7069

71-
if (this.isTouchDevice) {
70+
if (shouldNotZoom) {
7271
event.stopPropagation();
7372
event.preventDefault();
7473
return;

ghost/admin/app/styles/components/unsplash.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,12 @@
131131
cursor: zoom-in;
132132
}
133133

134+
@media (max-width: 540px) {
135+
.gh-unsplash-photo {
136+
cursor: default;
137+
}
138+
}
139+
134140
.gh-unsplash-photo-container > img {
135141
position: absolute;
136142
display: block;

0 commit comments

Comments
 (0)