반응형 일때 캡챠 부분 문의

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
반응형 일때 캡챠 부분 문의

QA

반응형 일때 캡챠 부분 문의

본문

안녕하세요~

반응형으로 스킨을 제작중에 있습니다.

캡챠 부분에서 막혀서 이렇게 문의 드립니다.

 

기본일때

661996078_1689653591.4523.png

 

해상도 480px 일때 (핸드폰)

661996078_1689653630.3921.png

 

위와 같이 표시가 됩니다.

 

여기서 질문 드립니다.

반응형 해상도 480px 일때도 기본형태인 캡챠로 출력되게 하려면 어떻게 해야 할까요?

write.skin.php


    <?php if ($is_use_captcha) { //자동등록방지  ?>
        <tr>
            <th>자동등록방지</th>
        <td>
        <?php echo $captcha_html ?>
        </td>
         </tr>
    <?php } ?>

 

css 부분


    @media (max-width:480px){
    .btn_type01{width:120px}    
    #wm_bo_list .list_top a{position:relative;left:0;margin-bottom:5px}
    #wm_bo_list{padding:20px 0}
    #wm_bo_sch{float:none;width:100%}
    #wm_bo_sch input[type=text]{width:calc(100% - 115px)}
    #wm_bo_w{padding:0}
    #wm_write_tbl .cate_wrap{width:100%}
    #wm_write_tbl .wm_input{width:100%;padding-left:10px}
    #wm_write_tbl .wm_select{width:100%}
    #wm_write_tbl .zip_input{width:calc(100% - 130px)}
    #wm_write_tbl .frm_address{width:100%}
    #wm_write_tbl .ps{font-size:13px}
    #wm_write_tbl .agr_area p{display:block}
    #wm_bo_v{padding:0}
    #wm_bo_v .v_page li{padding:15px 10px}
    #wm_bo_v .v_page li i{padding:0 20px 0 10px}
    #wm_bo_v .btn_area{padding:0 10px}
    #wm_bo_v .btn_area ul li a{width:50px;height:35px;line-height:35px;font-size:13px}
    #wm_bo_v .btn_area ul li a.w_btn{width:80px}
    }

 

고수님들의 조언 부탁드립니다.

비가 많이 오네요 비 피해에 잘 대비하시고 오늘도 좋은 하루 되세요^^

 

이 질문에 댓글 쓰기 :

답변 3

/plugin/kcaptcha/kcaptcha.lib.php line (244,245), 252, 256 if(is_mobile())로 시작하는 맨 앞에 //로 차단하세요.

 

님 답변 감사합니다
알려주신 방법대로 하면 2번 이미지처럼 되어버립니다.
1번 이미지처럼 구현을 하고 싶은 겁니다.. 어느 부분을 수정해야 할까요?
css 부분을 수정을 해봐도 1번 이미지처럼은 안되네요..ㅠㅠ

실제로 모바일 기기에서 확인해보면 틀리게 나옵니다.
위에 제가 제시한 대로 //로 블록 처리하면 피시 모드처럼 똑같이 나옵니다.


// 캡챠 HTML 코드 출력
function captcha_html($class="captcha")
{
//    if(is_mobile())
//        $class .= ' m_captcha';

    $html = "\n".'<script>var g5_captcha_url  = "'.G5_CAPTCHA_URL.'";</script>';
    //$html .= "\n".'<script>var g5_captcha_path = "'.G5_CAPTCHA_PATH.'";</script>';
    $html .= "\n".'<script src="'.G5_CAPTCHA_URL.'/kcaptcha.js"></script>';
    $html .= "\n".'<fieldset id="captcha" class="'.$class.'">';
    $html .= "\n".'<legend><label for="captcha_key">자동등록방지</label></legend>';
//    if (is_mobile()) $html .= '<audio id="captcha_audio" controls></audio>';
    //$html .= "\n".'<img src="#" alt="" id="captcha_img">';
    $html .= "\n".'<img src="'.G5_CAPTCHA_URL.'/img/dot.gif" alt="" id="captcha_img">';
    $html .= '<input type="text" name="captcha_key" id="captcha_key" required class="captcha_box required" size="6" maxlength="6">';
//    if (!is_mobile()) $html .= "\n".'<button type="button" id="captcha_mp3"><span></span>숫자음성듣기</button>';
    $html .= "\n".'<button type="button" id="captcha_reload"><span></span>새로고침</button>';
    $html .= "\n".'<span id="captcha_info">자동등록방지 숫자를 순서대로 입력하세요.</span>';
    $html .= "\n".'</fieldset>';
    return $html;
}

알려주신 부분을 다음과 같이 수정했습니다.
그런데 PC모드에서 보는것처럼 출력이 안되고 2번 이미지처럼 출력이 됩니다. 단, 음성부분만 빠져 있고요 말씀하신 부분 말고 CSS 부분도 수정을 해야 하는 건가요?

kcaptcha.lib.php


// 캡챠 HTML 코드 출력
function captcha_html($class="captcha")
{
    //if(is_mobile())
        //$class .= ' m_captcha';

    $html = "\n".'<script>var g5_captcha_url  = "'.G5_CAPTCHA_URL.'";</script>';
    //$html .= "\n".'<script>var g5_captcha_path = "'.G5_CAPTCHA_PATH.'";</script>';
    $html .= "\n".'<script src="'.G5_CAPTCHA_URL.'/kcaptcha.js"></script>';
    $html .= "\n".'<fieldset id="captcha" class="'.$class.'">';
    $html .= "\n".'<legend><label for="captcha_key">자동등록방지</label></legend>';
    //if (is_mobile()) $html .= '<audio id="captcha_audio" controls></audio>';
    //$html .= "\n".'<img src="#" alt="" id="captcha_img">';
    $html .= "\n".'<img src="'.G5_CAPTCHA_URL.'/img/dot.gif" alt="" id="captcha_img">';
    $html .= '<input type="text" name="captcha_key" id="captcha_key" required class="captcha_box required" size="6" maxlength="6">';
    //if (!is_mobile()) $html .= "\n".'<button type="button" id="captcha_mp3"><span></span>숫자음성듣기</button>';
    $html .= "\n".'<button type="button" id="captcha_reload"><span></span>새로고침</button>';
    $html .= "\n".'<span id="captcha_info">자동등록방지 숫자를 순서대로 입력하세요.</span>';
    $html .= "\n".'</fieldset>';
    return $html;
}

캐시삭제 전부 다 해봐도 변함이 없네요.. 알려주신 부분을 원상복구하면 PC에서는 1번 이미지처럼 적용, 모바일 에서는 2번 처럼 적용이 되네요 --;;
알려주신 방법대로 하면 PC 및 모바일에서 2번처럼 적용이 되면서 음성 부분만 빠져있고요.. --;;

뭐가 문제 일까요? 그누 버전과 상관이 있을까요?

다음 형태의 스타일이 도움이 될지 모르겠습니다.


@media (max-width: 480px) {
    #captcha { display: flex; flex-wrap: wrap; gap: 0.4em; align-items: center; }
    #captcha_audio { width: 1em; }
    #captcha_img { width: 6em; }
    #captcha_key { width: 6em; }
    /* #captcha_reload { ... } */
    /* #captcha_info { ... } */
}
답변을 작성하시기 전에 로그인 해주세요.
전체 2,061
QA 내용 검색
filter #css ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT