CSS positon:sticky 안드로이드/아이폰에서 채택완료
사용하기 편한 마크다운 위지위그 에디터를 만들고 있습니다.
CSS, PHP는 아주 조금 알고 있고, javascript(Typescript)는 조금 알고 있는 정도인데..
데스크탑용은 어느정도 사용이 가능한 정도입니다. (크롬과 파이어폭스 지원)
이번에 스마트폰(안드로이드 폰과 아이폰)에서 사용하기 편하게 만들고 있는 중입니다.
3가지 모드중, 위지위그 모드와 타이포라 모드입니다.
http://74.208.27.41/">http://74.208.27.41/ 로 접속하면 타이포라 모드입니다. (타이포라를 잘 모르시면 typora로 검색해서 다운로드해 보세요.)
마크다운도 조금 알고 있어야 됩니다.
위지위그 모드는 일반적인 에디터의 모드와 같지만, 마크다운을 알면 좀 더 편하게 사용이 가능합니다.
여기서 해결해 줘야 될 문제점.
position: -webkit-sticky;
position: sticky;
로 설정되어 있는데, 에디터 패널을 클릭하면 커서가 있는 곳이 툴바 아래도 들어가는데.. (제 폰(픽셀4XL)에서는)
이것을 막는 자바스크립트 코드나 CSS 코드를 알고 싶습니다.
아이폰에서도 잘 동작되는 코드 부탁드립니다.
답변 2개
아무래도 모든 브라우저를 호환하려면 fixed를 사용하는 방법이 가장 낫다고 생각합니다..
아니면 그냥 사파리는 고정을 지원하지 않거나.. ^^.....
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_position_sticky">https://www.w3schools.com/cssref/tryit.asp?filename=trycss_position_sticky
position: -webkit-sticky;
position: sticky; 이부분은 단지 에디터 메뉴가 스크롤이 내려가도 상단에 고정 되도록 하는 것입니다.
링크에서 테스트 해보시면 좋을듯..... 그리고
"에디터 패널을 클릭하면 커서가 있는 곳이 툴바 아래도 들어가는데.." 이말이 무슨뜻인지 모르겠습니다.....ㅠㅠ
답변에 대한 댓글 5개
가지고 계신 아이폰에서는 상단에 안 붙을 때가 있습니다.
그래서 상단에 고정시킬수 있는 솔루션을 찾고 있는 중입니다.
이러면 아래 포지션을 test 있는곳까지 지정하면 되지 않을까요?
position: -webkit-sticky;
position: sticky;
sticky로 쓰면 안드로이드서는 그럭저럭 쓸만합니다. (입력창이 툴바 아래로 들어가는 문제빼고..)
아이폰도 툴바를 미리 탑에 붙여 놓고 쓰면 그럭저럭..
안되면 이정도에 만족하고, 그냥 최대화해서 입력하라고 하면 될 것 같습니다.
그런데 스마트 폰에서 이렇게 작성하는 사람이 있을까 생각도 들고..
키보드 붙은 타블릿정도면 충분할 것 같기도 하고..
그냥 그러려니 하고 사용 합니다....^^;;
코로라 19로 집에 있다보니, 가능하면 불편한 점을 뺀 나름 최선의 에디터를 만들어 볼까하고 생각중입니다.
아직 갈길이 멀지만.. 사파리도 지원해야되고..
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
그누보드에서는 위의 제목도 있어서