본문 바로가기

모바일2

모바일 HTML 드래그, 제스처 뒤로가기, 앞으로 가기 방지 터치 디바이스에 html로 된 페이지를 띄워 키오스크를 개발하고 있다. edge webview 를 이용해서 띄우고 있는데, 좌우로 드래그 하면 앞으로가기, 뒤로가기 버튼이 나타난다. 그리고 아래로 드래그할 때는 페이지 새로고침이 된다. 필요없는 기능이기에 막아야했다. 그리고 덤으로 드래그 하면 화면이 당겨지면서 드래그 하는 방향으로 흰색 영역이 나타난다. 먼저 흰색 공간은 html { overflow: hidden; } 이렇게 해주면 더이상 나타나지 않는다. 그리고 새로고침, 앞으로 가기, 뒤로가기는 브라우저를 띄우고 edge://flags/ 로 들어가서 Overscroll history navigation, Pull-to-refresh gesture를 Disabled로 변경해주면 된다. Enable f.. 2021. 2. 17.
모바일에서 터치시 하이라이트 방지(a, img 등) React로 개발중인 모바일 페이지에서, 특정 영역을 터치할 때마다 하이라이트가 생겼다. 없애고 시켜서 구글링해보니 모바일 환경에서 a태그를 누르면 하이라이트가 생긴다고 한다. 그러고보니 특정 영역이 아니라 a태그 한정이었다. 아무페이지나 개발자도구를 열어 확인해보면 위와같이 a태그에 하이라이트가 생긴다. a 태그의 css에 다음 속성값을 주면 더이상 하이라이트가 나타나지 않는다. a { -webkit-tap-highlight-color:transparent;} 역으로 특정 색상을 주고 싶을 때도 이용할 수 있을 것 같다. 추가 a 태그 뿐 아니라 img 태그에도 하이라이트가 생기는 경우도 있었다. 이 경우도 동일하게 비활성화가 가능했다. a태그 한정은 아닌 듯. 2021. 2. 17.