mobile font size

html{font-size:calc(100vw*10/360)} @media (min-width:360px) { html{font-size:10px} } /* or */ html{ font-size:calc(100vw*11.66/420); } @media (min-width:420px) { html{font-size:11.66px} } 위 코드처럼 font-size를 주게 되면 브라우저 가로 사이즈에 따라 자동으로 폰트사이즈가 조절되고, rem으로 작성된 스타일의 크기가 자동으로 도절된다. 간단한 모바일 웹 페이지에서 사용하기 용이하다. 계산식은 아래와 같다. 10 : 360 = X : 420 10 : 360 = X : 390

2022.12.21

모바일 디바이스 체크

모바일 디바이스를 체크하여 PC웹 환경인지, mobile 환경인지 알아낼 수 있다. 이 코드를 활용해 모바일용, 또는 PC화면용 동작을 다르게 할 수 있다. function detectMobileDevice(agent) { const mobileRegex = [/Android/i, /iPhone/i, /iPad/i, /iPod/i, /BlackBerry/i, /Windows Phone/i] return mobileRegex.some(mobile => agent.match(mobile)) } const isMobile = detectMobileDevice(window.navigator.userAgent) if(isMobile){ // 모바일 } else { // PC }

2022.12.12

mobile 코딩 시 초기 세팅

mobile 코딩 시 초기 세팅

2021.12.23

모바일 CSS 스타일링

모바일 CSS 스타일링 모바일의 화면은 좌우로 좁다. 따라서 길게 스크롤이 발생할 수 있다. 바로가기 메뉴처럼 썸네일 로 만들어진 메뉴를 아래로 배치하면 사용자들이 보지 못하고 넘어갈 가능성이 있 기때문에 적절한 메뉴갯수 와 함께 이미지를 사용해야 한다. 각 디바이스에 맞는 고정형 사이트가 있고 어떤 디바이 스에서 보던 잘 맞는 가변형 사이트가 있다. 서브페이지 에서는 반드시 뒤로가기 버튼과 첫화면으 로 돌아가는 버튼이 존재해 야 한다. 가로보기와 세로보기 테스트를 해도 화면벗어남이나 깨짐이 없어야 한다. 고정형 px값을 사용하지 않고 유동형 레이아웃(%)를 사용한다.

2021.12.22

Mobile 홈 화면 전체 화면 모드

Mobile 홈 화면 전체 화면 모드 웹 페이지를 홈 화면으로 추가하면 특정 Meta 태그를 통해 웹 브라우저의 상단의 주소 표시줄과 하단의 버튼 Bar를 없앨 수 있습니다. 단 홈 화면에 추가한 후 홈 화면의 아이콘을 통해 접속 했을 경우에만 적용이 됩니다. 네이버나 다음의 모바일웹사이트에 가보시면 주소창이 사라지는걸 확인할수 있습니다. 아이폰과 안드로이드를 테스트한결과 둘다 사라집니다. 하지만 개인이 지식없이 만든 페이지의 대부분은 아이폰에서는 어떨지몰라도 안드로이드쪽에서는 100% 주소창이 남아있는 결과를 초래합니다. 결국 주소창만큼 페이지가 아래로 밀리게되고 보여지는 부분은 9/10이 되겟죠. 손으로 올려보면 주소창이 사라지지만 그건 근본적인 해결방안이 아닙니다. 위 사항은 자바스크립트문으로 간단..

2021.12.21

스마트폰 접속시 모바일페이지로 접속

스마트폰 접속시 모바일페이지로 접속 어떻게하면 기존에 웹페이지에서 pc로 접했을때와 스마트폰으로 접했을때 보여지는 페이지를 분류하냐는 겁니다. 이 문제또한 자바스크립트를 통해 스마트폰의 종류를 구별한다음 알맞게 페이지 브라우징 처리를 할수있습니다. var uAgent = navigator.userAgent.toLowerCase(); var mobilePhones = new Array('iphone','ipod','android','blackberry','windows ce','nokia','webos','opera mini','sonyericsson','opera mobi','iemobile'); for(var i=0;i

2021.12.21