TEST for PDF Viewer
TEST for PDF Viewer
Open PDF version here:
Welcome Letter 2024 Season 2.pdf
TEST #1 (pdf-viewer-pc 클래스가 적용되어 있음): table(width="800" height="2320")과 object(width="100%" height="98%") 태그를 이용하여 PC의 웹브라우저에 최적화.
=> 참고로, PC의 CMS에서는 웹사이트와 다른 style.css가 적용되기 때문에 여백 등에 약간의 차이가 있다.
=> iPhone에서는 table 태그에 의해 테두리가 있는 width="800"의 responsive 테이블에, object 태그에 의해 PDF의 한페이지만 나타나지만, Android에서는 object 태그에 의해 PDF의 내용이 없는 큰 여백에 이동버튼만 하나 나타난다.
=> 참고로, table 태그는 sa_header.php와 custom_header_index.php에 의해 divclass="table-responsive clearfix" table...로 바뀌게 되어 있다.(<와> 기호는 생략)
[참고] table width="800", object width:100%, object height: 2320 식으로 하면, 아래와 같이 테두리가 얇아진다.
=> 아래에서 CMS와 PC 브라우져의 표준으로 가져가기로 한 table(width="800") 태그 와 iframe(width="100%" height="2320") 태그와 같은 결과를 보여준다.
TEST #1 (pdf-viewer-mobile 클래스가 적용되어 있음): table(width="800" height="2320")과 object(width="100%" height="98%") 태그를 이용하여 PC의 웹브라우저에 최적화.
=> 참고로, PC의 CMS에서는 웹사이트와 다른 style.css가 적용되기 때문에 여백 등에 약간의 차이가 있다.
=> iPhone에서는 table 태그에 의해 테두리가 있는 width="800"의 responsive 테이블에, object 태그에 의해 PDF의 한페이지만 나타나지만, Android에서는 object 태그에 의해 PDF의 내용이 없는 큰 여백에 이동버튼만 하나 나타난다.
=> 참고로, table 태그는 sa_header.php와 custom_header_index.php에 의해 divclass="table-responsive clearfix" table...로 바뀌게 되어 있다.(<와> 기호는 생략)
TEST #2: table(width="800" height="2320") 태그 없이, iframe(width="800" height="2320") 태그 및 iframe 태그 내의 style="border:0px;"만으로 PC의 웹브라우저에 최적화.
=> 참고로, object 태그를 쓰는 것과 달리, ifame 태그를 사용할 때에는 CMS에서도 여백 등의 차이가 없이 PC의 웹브라우저에 나타나는 것과 똑같이 나타난다.
=> table과 object 태그를 사용할 때와 마찬가지로, iPhone에서는 width="800"인 PDF의 한페이지만 나타난다, 다만, table 태그를 쓰지 않았기 때문에 테두리도 없도 responsive도 되지 않는다. Android에서는 object 태그에 의해 PDF의 내용이 없는 큰 여백에 이동버튼만 하나 나타난다.
=> 참고로, object 태그를 쓸때와 다른 점 또 한가지는 object 태그를 쓸때에는 iPhone에서 PDF의 첫번째 페이지의 내용이 height="2320"에 맞도록 늘어져서 bottom 여백이 없는데, iframe 태그를 쓸때에는 PDF의 첫번째 페이지의 내용은 정상적인 모습으로 나오지만 두번째 페이지에 대해서는 내용은 나타나지 않고 긴 bottom 여백으로 나타난다.
[참고] 위 TEST #2의 iframe(width="800" height="2320") 태그 앞에 object와 똑같이 table(width="800" height="2320") 태그를 추가하였을 경우
[참고] 위 TEST #2를 table(width="800") 태그 와 iframe(width="100%" height="2320") 태그로 가져갔을 경우
=> CMS와 PC 브라우져의 표준으로 사용하기로 한다.
=> 참고로, table width가 845일 경우에는 원본 PDF 사이즈보다 크기 때문에 자연스럽게 테두리가 두꺼워진다.
TEST #3: PDF의 두 페이지가 나타나는 Mobile Device 전용(pdf-viewer-mobile) PDF Viewer
=> div(class="embed-responsive" style="padding-bottom:280%;)와 iframe(width="100%" style="border:0px;), src="https://docs.google.com/gview?url=https://www.webee.com.au/membershipmanager2/upload_files/welcomeletter2024season2_b09240.pdf&embedded=true"
=> Mobile Devide에서 두 페이지 이상 나타나게 하는 것은 Google을 통한 방법밖에 없다. 두꺼운 테두리가 생긴다.
=> google에서 source를 가져오기 때문에, 로딩속도에 따라 PC 및 Mobile Device에서 잘 나타나지 않는 경우도 있기 때문에 PDF original file로 이동하는 링크도 같이 제공하도록 한다.
=> iframe 태그 내에 width="100%" height="2320"와 같이 굳이 height 값은 지정해 주지 않아도 된다. width="100%"만 주어도 padding-bottom:280%에 의해 스마트폰에서는 2페이지가 모두 나타난다. padding-bottom:140%으로 하면 한페이지의 내용만 나타난다. 2페이지 이상일 경우에는 padding-bottom:200%로 해서 스크롤바가 나타나는 것으로 통일하기로 한다.
=> Mobile Device 뿐만 아니라 PC의 웹브라우져에서도 2페이지가 나타나지만, CMS와 Daum 웹에디터에는 embed-responsive 클래스가 적용되지 않고 iframe에는 width=100%만 있어서 PDF 파일의 상단 일부분만 나타난다.
따라서, 아래의 최종 솔루션에서는 CMS와 PC의 웹브라우저에서는 나타나지 않도록 하고 Mobile Device에서만 나타나도록 하기 위해 pdf-viewer-mobile 클래스를 쓰도록 한다.
=> 최종적으로, 구글을 통한 PDF Viewer는 모바일 폰에서 나타나지 않도록 하고, 모바일 폰에서 PDF 파일을 열수 있도록 링크만 나타나도록 한다.
Open PDF version here:
Welcome Letter 2024 Season 2.pdf
(사실, 이 솔루션은 CMS, PC 및 Mobile을 모두 충족시키지만, Google의 giview를 사용하기 때문에 컨텐트 로딩이 안정적이 못하다는 치명적인 단점이 있다.)
최종솔루션
Open PDF version here2:
[참고] div class="embed-responsive embed-responsive-16by9: object
[참고] div class="embed-responsive embed-responsive-4by3: object
[참고] div class="embed-responsive embed-responsive-16by9: iframe
[참고] div class="embed-responsive embed-responsive-4by3: iframe