같은 코드, 다른 기기에서의 뷰포트





HTML/CSS/JS가 웹 브라우저에서 동작할 때
내 PC와 연결된 디스플레이에서는 정상적인 비율로 나오는데 

다른 기기와 연결된 디스플레이에서는
멋대로 비율이 바뀐다던가, 여백 공간이 남는 등의 현상이 발생하고는 한다.


대부분 내 PC와 그 다른 기기의 브라우저 환경이 다르기 때문에 발생한다.

예를 들어, PC와 셋톱박스(STB)를 각각 동일한 모니터에 연결한다 했을 때

다음과 같은 두 쌍의 인터페이스가 생성된다.


MONITOR-PC = 마우스, 키보드 (스크롤 등으로 무한히 확장 가능한 화면)

MONITOR-STB = 모니터, TV (고정된 화면)


사용자 인터페이스가 다르기 때문에

- base css 파일이 다르고

- 뷰포트 overflow 시,
  pc 브라우저는 스크롤바, stb 브라우저는 ghost space를 패딩하여 보여준다.



때문에 셋톱박스에서 웹뷰어 프로그램을 사용하여 웹 페이지를 띄운다면
그 웹뷰어 프로그램이 어떤 프로그램의 어떤 버전 기반인지 추적해야한다.


예를 들어,
Android System WebView는 Google Chromium 기반이며
버전은 Chromium 95.0.4638.74 


그래서 폰트 사용에도 유의해야한다.
CDN 방식으로 네트워크를 타고 폰트를 다운로드 하는 프로그램이라면
네트워크 구성에 따라 CDN 주소가 막혀서
해당 기기의 기본 폰트가 나올 수도 있기 때문이다.





댓글

댓글 쓰기

이 블로그의 인기 게시물

Blogger 커스터마이징 : CSS 수정 (sticky-header)

이미지
sticky-header, centered-top-container sticky animating 삽질1 google blogger의 템플릿 테마중 하나인 Contempo에서는  스크롤을 어느 정도 내린 상태에서 다시 올리면 상단의 검색창이 내려와서 스크롤을 다시 내릴 때까지 유지된다. (이 "어느 정도"에 해당하는 값은  기본 테마의 javascript에 코딩 되어있을 것으로 추측한다.) css 수정 후 이 부분에 문제가 생겨서 내릴때에도 올릴 때에도 계속 검색창이 내려오고 사라졌다를 반복한다. < 페이지 최하단 모습 > 데이터를 색인하여 찾을 때는 유용한 기능이라고 생각하지만 검색 기능은 이미 블로그 최상단에 존재한다. 따라서 해당 기능을 제거하기로 했다. scroll event를 감지하고 그에 따라 html이나 css문서를 수정하는 작업은  javascript가하는 일이다. html 편집기를 통해 코드를 살펴본 결과 이 javascript 코드는 외부 cdn 서버에서 가져오는 것 같다.  javascript 코드를 직접 건드려야되나 싶어서 구글링 해 본 결과 간단하게 css 코드를 수정해서 없앨 수 있었다. sol) sticky-header 제거 https://joshua-dev-story.blogspot.com/2020/04/blogger-remove-sticky-header.html FE, Publishing 에서는 '고정 헤더'라고 부르고 있는 이 태그의 css를 수정하면 된다. display 옵션을 none으로 바꿔서 기존 요소의 block을 전부 없애고 기능까지 해제해버리는 것. 이 sticky header를 보이지 않게하는 방법은 opacity를 0으로 만들거나 visibility를 hidden으로 할 수도 있지만 display : none 옵션이 가장 확실해보인다. 수정 후 여전히 scroll 이벤트에 따라 DOM의 변경이 일어나는 것 같지만 sticky header는 더이상 보이지 않는다. 삽질2...
Read more »

노마드코더 개발자북클럽 Clean code 완주, 독후감

이미지
짧은 기간 동안 Java로 쓰여진 클린 코드 책을 읽으며 코드를 짤 때 더 정성을 들여 쓰는 습관을 들였다. 당장 작동하는 코드보다는 유지 보수가 편한, 수정보다는 확장을 할 수 있는, 잘 읽히는, 정직하고, 하나의 일에 몰두하는 그런 코드를 짜려고 했다. 퇴근을 하고 책상 앞에 앉으면 오늘 작성했던 class가 아른거리고 과연 이게 최선이었을까 생각하게 되었다. ========================================================== 책을 읽으면서 대부분 공감하고 고개를 끄덕일 수 있었지만 좋은 코드를 쓰는 법을 아는 것과 좋은 코드를 쓰는 것에는 큰 차이가 있다. 좋은 코드를 쓰는 법을 알기만 해서는 그저 말로만 잘난 체 할 수 밖에 없을 것이다. 좋은 코드를 쓰는 사람은 코드 리뷰를 하며 시스템 변경에 유연한 구조인지 고민한다. 확실히 후자가 더 고된 작업이지만 견고한 프로덕트를 만드는, 실체가 있는 실력이 는다고 생각한다. ========================================================== Java기 반의 코드를 이해하기는 쉽지 않았지만 확실히, Java가 객체 지향적인 장치가 많다고 느꼈다. Python 웹 개발자라면 당장 객체지향 원칙이나 디자인 패턴을 익히기 보다는 웹 애플리케이션 프레임워크를 익히기를 추천한다. 그 중에서도, FastAPI를 추천하는데 Layer와 Depends를 사용한 설계 장치를 사용하며 실전 감각을 기르면서 객체지향적인 사고를 할 수 있다. 혼자 상향식으로 배우기 버겁다면 Framework의 규칙을 따르며 배워나가는 것이 효율적이라고 생각한다. 그리고 이렇게 해야 실전 감각을 느낄 수 있다. ========================================================== 클린 코드 북클럽 챌린지 덕분에 오늘도 나는 하나의 괴이한 모듈을 처리했다. util 패키지의 fileutil이라는 모듈인데 온갖 잡다한 파일 처리를 다 도맡아 하...
Read more »

노마드코더 개발자북클럽 Clean code TIL 7 : 7장. 오류 처리

이미지
       오늘 TIL 3줄 요약 논리가 오류 처리 코드와 뒤섞이지 않으므로 오류가 발생하면 예외를 던지는 편이 낫다. 확인된 예외는 OCP를 위반한다. 하위 단계의 코드 변경이 상위 단계 메서드 선언부 전부를 고치게 만들기 때문이다. 외부 라이브러리, API 가 던지는 예외를 전부 잡아내지말고 감싸는 클래스, Wrapper를 사용하여 의존성을 줄이자. 가능하다면, 예외 유형 하나로 오류를 구분하자. TIL (Today I Learned) 날짜 2025. 06.03 오늘 읽은 범위 7장. 오류처리 기억하고 싶은 내용을 써보세요. 오류 플래그, 호출자에게 오류 코드 반환하기  vs 예외 던지기. 에외를 지원하지 않는 프로그래밍 언어가 많았다. try-catch-fianally try 블록은 트랜잭션과 비슷하다. catch 블록에서 예외 유형을 좁혀라. 확인된 예외는 OCP를 위반한다. 하위 단계의 코드 변경이 상위 단계 메서드 선언부 전부를 고치게 만들기 때문이다. 예외에 의미를 제공하라. 특히, 애플리케이션이 로깅을 제공한다면 catch 블록에서 오류를 기록하도록 충분한 정부를 넘겨준다. 오류를 처리하는 대부분의 로직. 1) 오류를 기록하고 2) 프로그램을 계속 수행해도 좋은지 확인한다. 정상 흐름부터 정의하라. NULL을 반환하지 마라. 호출자에게 문제를 떠넘기는 것이다. NULL확인이 누락된 코드를 고치는 게 아니라 특수 사례 객체를 통해 NULL확인을 만들지 마라! NULL을 전달하지 마라. null을 전달받는 쪽에서 처리하지 말고 null 을 전달하는 쪽에서 전달을 막아라. 오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요 NULL을 확인할 일 자체를 최소화해야겠다. NULL대신 적합한 기본값을 사용하자. 깨끗한 코드는 가독성도 좋아야하지만 안전성이 높아야한다. 그리고 이 둘은 시간-공간 개념처럼 Trade off되는, 상충되는 개념이 아님. 궁금한 내용이 있거나, 잘 이해되지 않는 내용이 있다면...
Read more »