h5 페이지 개발 절차

2043 단어

하나.모바일 페이지 개발(h5페이지)

  • 단위rem
  • 동적 계산 html와 글꼴 크기
  • 포석은 flex
  • 로 통일된다
    //  , rem 
    (function(doc,w){
        var d=doc.documentElement,re='orientationchange' in window?'orientationchange':'resize';
        var r=function(){
            var cw=d.clientWidth;
            if(!cw)
                return;
            d.style.fontSize=(cw/37.5)+'px';
        };
        if(!doc.addEventListener)
            return;
        w.addEventListener(re,r,false);
        doc.addEventListener('DOMContentLoaded',r,false);
    })(document,window);
    
  • 각 원소의 넓이를 20으로 나누면 된다./2 반,/10과 글씨체 크기는 px로 환산
  • 주의: 구글 브라우저의 기본 글꼴 크기는 최소 12px이기 때문에 2px 편차가 있을 수 있습니다. 저희가 수동으로 최소 글꼴을 설정해야 합니다

    #####  
    

    flex 레이아웃 소개


    Web Workers websocket
    /* 이동단 HTML5 클릭 이벤트 회색 배경 솔루션 */html,body {-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0,0,0,0);}
    H5 페이지 이동 클릭 이벤트 귀속 실효 해결 방법
    최근에 H5의 작은 게임을 했는데 페이지 클릭 이벤트가 IOS에 귀속되어 효력을 잃는 문제가 발생했습니다. 조회와 관련된 문제를 본 후에 몇 가지 문제가 발생했습니다.
    1、클릭 이벤트가 IOS에서 바인딩되지 않음
    왜냐하면ios시스템에서 예를 들어document,div,body 등 자체가 클릭할 수 있는 속성이 없는 요소는 클릭 이벤트를 위탁 관리하는 부모 요소가 될 수 없기 때문이다.따라서 이러한 방법으로 이벤트 트랜잭션을 진행하면ios는 문서의 클릭 이벤트를 얻을 수 없으며 귀속시키고 싶은 요소를 얻을 수 없습니다.
    해결 방법: 연결 클릭 이벤트 요소에cursor:pointer를 연결합니다.
    2. 이동자 실행 중 페이지 오류
    제가 첫 번째 상황의 문제를 해결한 후 H5 게임 테스트복에 게임 페이지 마스크가 클릭해도 지워지지 않는 상황이 발생했습니다.

    좋은 웹페이지 즐겨찾기