반응형 웹 입력폼 코딩

반응형 웹은 PC용과 타 기기들을 고려한 코딩을

한 번에 한 곳에 몽땅 넣기 때문에

CSS에서 표시여부를 조정하게 되지만

폼 submit을 하게되면 해당 갯수만큼 Submit 되기도 한다.

 

 

CSS에서 각각의 기기별로 class를 지정하면 해당되지 않는 경우에는

display가 none으로 처리되며

화면영역에서 사라지고, Script상에서도 감지되지 않지만

(visible은 단순히 보이지만 않는 것이므로 요건 아님)

소스보기와 submit에서는 사라지지 않는 경우가 있다.

 

@media all and (max-width:480px) {
    .모바일용 { 블라블라... }
    .PC용 { display: none; }

@media all and (min-width:481px) { ... }
@media all and (min-width:481px) and (max-width:939px)  { ... }

 

요롤 땐 페이지 로딩후에 바로 타 기기관련 class를 사용한 태그들을

제거해주는 것이 깔끔하다.

 

각 영역을 구분하는 곳에 hidden 구분을 하나씩 두고

<div class="PC용">
    <input type="hidden" id="누구냐" value="PC" />

<div class="모바일용">
    <input type="hidden" id="누구냐" value="PC아님" />
 

 

스크립트로 제거하자.

if( "PC" == $("#누구냐").val() ) {
    $(".모바일용").remove();
} else {
    $(".PC").remove();
}