Ionic에서 핀치 인 아웃으로 글꼴 크기를 변경해보십시오 (iOS safari 지원)

제가 개인 개발하고 있는 AA 정리 zip 전달의 서비스(AAHub)에서 요망이 있던 내용입니다. 스마트 폰으로 핀치 인 아웃의 조작을했을 때에 폰트 사이즈의 변경을 실시할 수 있도록(듯이) 했습니다.


본 기사에서는 그 때의 구현을 되돌아 보겠습니다.

핀치 인 아웃으로 FontSize 변경

기본적으로 핀치 인 아웃을 할 때 글꼴 크기를 변경하려면 다음 단계가 있습니다.

핀치 인 아웃을 리스팅하는 Directive를 만든다

개방 상태, 폐쇄 상태의 이동량을 측정한다

이동량에 맞게 fontSize 변경

핀치 인 아웃으로 전체 화면 크기 조정을 비활성화합니다 (iOS safari 용)

그런데, 이 중 1, 2, 3에 대해서는 이미 같은 것을 작성하고 있는 분이 있습니다. 그래서 이번에는 여기를 사용했습니다.
htps : // 기주 b. 코 m / 이오니 c 룬 / ushin g-te-Pin ch- 게 s slee-in-i oni c-2

4. 핀치 인 아웃에 의한 화면 전체의 확대 축소를 무효화한다 (iOS safari용)

1 ~ 3의 구현만으로 핀치 인/아웃을하면 전체 화면이 확대/축소됩니다.


그러므로 여기를 비활성화해야합니다. 이번에는 다음 소스 코드를 index.html에 추가했습니다.

index.html

    <script>
document.documentElement.addEventListener('touchstart', function (e) {
  if (e.touches.length >= 2) {e.preventDefault();}
}, {passive: false});
/* ダブルタップによる拡大を禁止 */
var t = 0;
document.documentElement.addEventListener('touchend', function (e) {
  var now = new Date().getTime();
  if ((now - t) < 350){
    e.preventDefault();
  }
  t = now;
}, false);
    </script>

이 소스 코드를 추가하면 iOS Safari에서도 문자의 확대·축소만이 동작하게 됩니다.

소스 코드

htps : // 기주 b. 코 m / scrp gi / pin ch fu tzu zu-chan / t ree / ma s r

요약

만약, 핀치 인 아웃에 의한 처리를 실시하는 &Web에도 같은 기능을 구현한다고 하는 분은 선행으로 해 보세요.