코딩/MOBILE (4) 썸네일형 리스트형 [jquery] 모바일 video autoplay 관련 정리와 인앱 브라우저 체크 방법 이전에 PC 크롬에선 audio autoplay가 안되는 이슈가 있었다. 사용자 웹접근성을 기반으로 위배되지 않도록 제약이 걸리는 경우가 대다수인데, 특히나 모바일같은경우엔 더욱 철저하게 지켜진다. 모바일은 다양한 브라우저와 인앱 브라우저 등이 있다. 이때 video (mp4) 자동 재생에 관련해서 이슈가 굉장히 많은데, 유형은 크게 2가지로 나뉘어진다. 1. 영상지원이 안되는 경우 해당 비디오의 재생여부를 확인할 수 있는 javascript가 있다. HTMLMediaElement.canPlayType() 구문 섹션str = audioOrVideo .canPlayType ( mediaType ); 매개 변수 섹션미디어 종류DOMString미디어의 MIME 타입을 포함.반환 값 섹션String. 가능한 값.. [iOS] 모바일 사파리에서 전화번호 링크 비활성화하기 컨텐츠중 전화번호 텍스트 노출하는게 있었는데 iOS safari 브라우저 에서 텍스트가 보이지 않았다. 자세히 보니 전화번호 링크로 활성화되있는걸 확인할 수 있었다. (tel link) 대시(-)를 삭제하니 텍스트로 제대로 보여지지만 1234-1234 이런식으로 작성되어있으면 링크가 활성화 되는게 문제. 다행히 해결방법은 금방 찾을 수 있었다. head에 메타태그만 기입해주면 된다. 대부분 1234-1234 이렇게 작성하다보니 이런 이슈가 있는줄은 처음알았다. * 관련문서https://stackoverflow.com/questions/226131/how-to-disable-phone-number-linking-in-mobile-safari 모바일 햄버거 메뉴 (레프트 메뉴) 오픈 스크롤 막기 모바일 햄버거 메뉴를 만드는 방법은 많다.해당 메뉴를 눌렀을 때 뒤에 암막처럼 깔린 뒤에,컨텐츠들이 스크롤 안되게 해야하는게 정석인데.. 이를 위해 스크롤 막는 스크립트를 사용했다가는 레프트 메뉴마저 스크롤을 사용할 수 없는 일이 생겨버린다 ㅠ_ㅠ조건문을 줘서 스크롤을 막다 풀었다 해버리니, 스크롤 이벤트 관련 스크립트가 오류나는 일이! 알고보니 마크업부터 제대로 잘 짜지 못해 생긴 일이라서다시금 잊지말자고 기록.. * 기존에 내가 했던 방식 ---> fixed 시켜주고, width 100%, background:(0,0,0, 0.7)의 배경을 만들어줌 ----> 메뉴 내용 생성 (약 width값 60%)디테일한 내용 이런식으로 하니 userwrap 전체가 100%로 잡혀 스크롤 가능시, 컨텐츠마저 스크.. 모바일 인앱 브라우저 변수 지정 // 페이스북 인앱 변수지정 function isFacebookApp() { var ua = navigator.userAgent || navigator.vendor || window.opera; return (ua.indexOf("FBAN") > -1) || (ua.indexOf("FBAV") > -1);} // 아이폰 페이스북 인앱 지정 function isFacebookApp() { var ua = navigator.userAgent || navigator.vendor || window.opera; return (ua.indexOf("FBAN") > -1) || (ua.indexOf("FBAV") > -1); } var iOS = /iPad|iPhone|iPod/.test(navigator.userA.. 이전 1 다음
