문제
반응형 디자인의 웹을 만들었다. 핸드폰에서 웹을 켜고 화면의 Input을 클릭하니 자동으로 화면을 확대해서 인풋을 강조해준다. 아... 친절한 모바일 이펙트...😇 하지만 내가 의도한 이펙트가 아닐뿐더러 오히려 UX를 해치기까지 하는 상황. 해당 이펙트를 막아보자. 코드 한 줄로 해결이 가능하다.
해결방법
index.html을 열어 name이 viewport 인 메타태그를 찾아준다.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
...
</head>
...
</html>그리고 해당 태그에 이렇게 content를 추가해주면 끝! 자동으로 확대되지 않을 뿐더러, 유저가 확대/축소할 수도 없게 막아버렸당. 깔끔~
<html>
<head>
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1.0,
user-scalable=0"
/>
...
</head>
...
</html>'FE > web' 카테고리의 다른 글
| [web] HTML 개념 공부 정리 (0) | 2020.09.23 |
|---|