(출판된 page html 단독 실행시) IOS에서 화면 전환할때 페이지 크기 문제

vulcan9 commented 3 years ago

재연

출판된 page-1.html을 IOS 기기에서 크롬브라우져로 띄운다.
- 테스트에 사용된 epub 파일 : html-scale-test.zip
```
http://localhost/OPS/page-1.html
```
가로, 세로로 디바이스 방향을 전환해본다
화면 크기와 페이지 크기가 맞지 않는 현상이 생긴다.

다음과 같은 형태로 페이지가 나타나야함

vulcan9 commented 3 years ago

원인

출판된 페이지는 고정된 크기로 설정되어 있음
```
<meta name="viewport" content="width=1280, height=720">
```
출판된 페이지에는 디바이스의 크기에 맞게 페이지를 꽉차게 보여주는 기능이 없음

문제 해결

디바이스의 크기에 맞게 페이지를 꽉차게 보여주는 기능을 구현한 JS파일을 직지에서 import 한후 출판한다.

구현 내용

viewport 변경 및 터치 확대 축소 막기

<meta name="viewport" 
  content="width=device-width, height=device-height,
           initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, 
           user-scalable=0">

IOS 10 이상에서 확대 축소 막기

document.documentElement.style['touch-action'] = 'none';

디바이스 방향 전환 감지
- Device 마다 orientationchange 이벤트 발생 여부가 정확치 않으므로 resize 이벤트를 사용함
- resize에 의한 device 변경 사항이 완료된 후 페이지에 scale, 중앙 정렬 적용

vulcan9 commented 3 years ago

2.1.25 버전(이상)에서 처리(구현) 되었습니다.

아래 파일을 직지에서 파일 가져오기하여 기능을 추가할 수있습니다. 파일 내용은 직지 2.1.25 버전에 패치되었습니다. 2.1.25 버전 이상에서 출판된 경우 아래 첨부파일이 추가되어져 있더라도 정상 동작 합니다. (기능 중복 실행 안됨)

기능이 구현된 JS 파일 다운로드

~~asset-2081a520-ce05-4d78-952e-b275d9efc19f.js : make-scaled-page-x.html.zip~~

이 버전의 JS 파일은 삼성 인터넷 브라우져에서 정상동작 하지 않음. 하단에 다시 링크된 파일을 사용할것.

테스트 파일에 바로 적용

page-1.html 파일 확인

<meta name="viewport" 
      content="width=device-width, height=device-height,
               initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, 
               user-scalable=0">

이렇게 되어 있다면 원래 출판할때 상태로 바꿔준다.

<meta name="viewport" content="width=1280, height=720">

테스트에 사용된 epub 파일 (html-scale-test.zip)에서 다음 파일을 다운로드한 파일로 교체한 후 테스트

~/OPS/custom/asset-2081a520-ce05-4d78-952e-b275d9efc19f.js

vulcan9 commented 3 years ago

기능이 구현된 JS 파일 다운로드

디바이스의 삼성 인터넷 브라우져에서 정상 동작하도록 수정함 asset-2081a520-ce05-4d78-952e-b275d9efc19f.js : make-scaled-page-x.html.zip

수정 내용

디바이스에서 브라우져의 표시영역 크기를 알아내는 로직 수정함

// 이전 코드:
var w = window.innerWidth;
var h = window.innerHeight;
// 수정된 코드
var w = window.document.documentElement.clientWidth;
var h = window.document.documentElement.clientHeight;

vulcan9 / jikji.editor