Expand all

ve.init.mw.ViewportZoomHandler

Constructor

new ve.init.mw.ViewportZoomHandler() #

Prevent iOS browsers from wrongly zooming in the page when the surface is focussed. (T216446)

When the user places a cursor for text input anywhere on the page, iOS browsers zoom in the page to ensure the text size is legible and the cursor can be comfortably placed in the right place with a finger.

There's a browser bug that, on some devices (e.g. iPhone XS, but not iPhone SE), causes this zoom to occur even though our text is already using the required minimum font size (16px). Additionally, the zoom occurs when placing the cursor in image captions, which intentionally use a smaller font size.

In both cases the zoom is more problematic than helpful, because it causes parts of the toolbar to disappear outside the viewport.

To prevent it, temporarily add a tag like <meta name="viewport" content="maximum-scale=1.0"> to the page when the user is about to focus the editing surface. However, on iOS Chrome, this also prevents intentional pinch-zoom. To avoid this, immediately remove the tag again after focussing, or if it looks like the user is trying to zoom (used multi-touch or caused a scroll).

Source:
Prevent iOS browsers from wrongly zooming in the page when the surface is focussed.

Methods

allowZoom() #

Change the <meta name="viewport"> tag to allow automatic zooming once again.

Source:
Change the <meta name="viewport"> tag to allow automatic zooming once again.

attach(surface) #

Start listening to events and preventing zooming.

Parameters:

Name Type Description
surface ve.ui.Surface
Source:
Start listening to events and preventing zooming.

detach() #

Stop listening to events.

Source:
Stop listening to events.

onFocus() #

Handle surface model focus events.

Source:
Handle surface model focus events.

onTouchEnd(e) #

Handle touch end events.

Parameters:

Name Type Description
e jQuery.Event

Touch end event
Source:
Handle touch end events.

onTouchMove(e) #

Handle touch move events.

Parameters:

Name Type Description
e jQuery.Event

Touch move event
Source:
Handle touch move events.

onTouchStart(e) #

Handle touch start events.

Parameters:

Name Type Description
e jQuery.Event

Touch start event
Source:
Handle touch start events.

preventZoom() #

Change the <meta name="viewport"> tag to prevent automatic zooming.

Source:
Change the <meta name="viewport"> tag to prevent automatic zooming.