저는 미디어 쿼리를 사용하여 웹 사이트를 디자인하고 있으며 데스크톱과 iPad에서 모든 것이 잘 보이도록 만들었지 만 제 휴대폰은 다른 이야기입니다. 새로운 스마트 폰이기 때문에 픽셀 크기는 1024x768이므로 내 태블릿처럼 표시하려고합니다. 미디어 쿼리를 사용하여 1024x768의 내 휴대폰이 내 iPad와 다르게 표시되도록 지정하려면 어떻게해야합니까? 어떤 도움을 주셔서 감사합니다.대용량 휴대폰을위한 반응 형 디자인
는 여기에 내가 시작하는 작업을했습니다 내용은 다음과 같습니다
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
초기 생각
휴대 전화에 정확한 레이아웃 문제에 대한 몇 가지 추가 정보가 도움이 될 것입니다. 또한 올바른 <meta> 태그를 사용하고 있는지 확인하십시오 (@Lokase가 제안한대로). 좋은 실행은 here 찾을 수 있습니다.
두 가지 가능한 솔루션이 이미 휴대 전화를 대상으로 시도하는 데 사용하는 width 미디어 쿼리와 함께
사용 min-height 및 max-height. 그 옵션이없는 경우
, 당신은 사용자 에이전트를 감지하는 시도하여 전화를 대상으로 자바 스크립트를 사용할 수 있지만이 치거나 미스 될 수있다.
경고의 말씀 특정 뷰포트 끝없는 좌절으로 이어질 것을 위해 디자인을 시도 을 말했다 모두와 함께
. 레이아웃을 재고하고 다시 생각해보고 미디어 쿼리를 사용하는 방법에 대해 집중적으로 집중해야 할 수도 있습니다. 이것은 구현하는 데 어려움이있을 수 있지만 장기적으로 자신에게 감사 할 것입니다. 지금 시장에서 고해상도 안드로이드 폰의 수를 고려하십시오. 얼마나 많은 휴대폰이 곧 선적 될 것입니까?
뷰포트 메타 태그의 모양을 게시 할 수 있습니까? – Lowkase
아직 뷰포트를 사용하지 않았습니다. 대답은 거기에 있습니까? – usefulbattery
시작하려면 다음과 같이 시작하십시오. – Lowkase