모바일 웹을 제작할 때 주의할 점들

앱을 설치를 해야하지만 웹을 설치하지 않아도 된다. 그 때문에 많은 스타트업이 초기에 모바일 웹을 제작하곤 한다.

필자도 여러번 모바일 웹을 제작해보았는데 다음과 같은 문제점을 겪어보았다.

앞으로도 더 늘어갈 것 같은데, 우선은 아래와 같이 정리할 수 있다.

 

 

- QA는 브라우저가 아닌 실제 모바일 기기에서 테스트할 것

브라우저 크기 조정을 통해서 테스트해보는 것은 모바일 기기에서 테스트하는 것과 다르다.

반드시 유저에게 노출되는 실제 환경과 흡사한 환경에서 테스트해보자.

 

- input의 타입에 따라 다른 키보드를 출력하므로 유의할 것

https://stackoverflow.com/questions/51660812/best-settings-for-html-input-type-number-for-mobile-devices

 

- iOS에서 input autofocus될 때 font size가 16px이상이면 자동으로 zoom in되는 현상

해결법 : https://devsoyoung.github.io/posts/ios-input-focus-zoom/

 

- iOS에서 글자 크기가 자동으로 adjust되는 문제

html {
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
}

 

- 모바일 웹 앱에서 100vh가 일정하게 유지되지 않는 문제

https://forestlee0513.github.io/blog/%EB%AA%A8%EB%B0%94%EC%9D%BC%EC%97%90%EC%84%9C-100vh%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EC%A7%80-%EB%AA%BB%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0/

모바일에서 100vh를 사용하지 못하는 이유