모바일/태블릿 기기의 HTML 변경

버튼 1과 버튼 2가 있습니다. 컴퓨터 화면에있는 경우 버튼 1을 표시해야하며 대신 휴대 기기/태블릿 기기에 있으면 버튼 2를 표시해야합니다. 그래서 내 페이지에서 보이는 HTML을 바꿀 수있는 무언가를 원합니다. html에는 mediaquery와 같은 것이 있습니까? 미리 감사드립니다.모바일/태블릿 기기의 HTML 변경

출처

2014-11-03 JEricaM

예, 원하는 결과를 얻으려면 media-queries를 사용할 수 있습니다. 하지만 CSS 스타일 시트에서 사용하십시오. 이 같은

뭔가 :

@media only screen and (max-width : 480px) { 
    .btn-mobile-visible { 
     visibility: visible; 
    }; 

    .btn-desktop-visible { 
     visibility: hidden; 
    };  
} 

@media only screen and (min-width : 481px) { 
    .btn-mobile-visible { 
     visibility: hidden; 
    }; 

    .btn-desktop-visible { 
     visibility: visible; 
    }; 
}

그리고 당신의 HTML에 당신이 당신 버튼에 CSS-클래스를 추가 : 사용자가의 크기를 변경하는 경우

<button class="btn-desktop-visible">Visible in desktop</button> 
<button class="btn-mobile-visible">Visible in mobile</button>

원하지 않는 부작용이있을 수 그/그녀의 브라우저 창 - 아마도 좀 지저분해질 것입니다 :)

출처

2014-11-03 08:33:50 aup

그것은 좋은 해결책이지만 모든 모바일/태블릿 장치를 선택할 수 있습니까? 해상도 크기를 정의하지 않았습니다. – JEricaM

미디어 쿼리는 최대/최소 너비/높이로 작동하고 이러한 너비/높이에 대해 지정된 css 클래스를 적용합니다. 그것은 두려운 "장치"와 같은 것을 보지 않습니다. 기기 기반의 솔루션을 원한다면 http://detectmobilebrowsers.com/과 같은 일부 자바 스크립트 라이브러리를 살펴보고 jQuery 또는 무언가를 사용하여 버튼이나 다른 요소를 숨기거나 표시해야합니다. 그 해결책은 꽤 빠르지 만 꽤 지저분해질 것입니다 :) – aup

@media 화면과 (max-device-width : 600px) {} 그리고 제가 초상화에 있다면, 그것은 작동하지만 가로로 전환하면 숨겨집니다. 버튼이 숨겨져 있지만 세로로 다시 전환하면 버튼이 어떻게 표시됩니까 ?? – JEricaM

css 미디어 쿼리로 버튼의 가시성을 간단하게 변경할 수 있습니다. 또는 head.js과 같은 라이브러리를 사용하여 어떤 브라우저를 사용 중인지 확인한 다음 자바 스크립트를 통해 올바른 버튼을 삽입하십시오.

출처

2014-11-03 08:31:22

모바일/태블릿 기기의 HTML 변경

답변

관련 문제