버튼 크기가 너비 크기에 따라 변하지 않습니다.

Question

나는 미디어 쿼리를 사용하여 내 웹 사이트를 태블릿/스마트 폰에서 그래픽으로 더 멋지게 만들려고했습니다. 주변을 둘러 보았고 미디어의 너비를 통해 크기를 조정하는 공통 구문을 발견했습니다.

/*Media Query*/ 

@media only screen and (max-device-width: 720px) { 

#homebutton input[type=image] { 
    position: absolute; 
    left: 0%; 
    top: 0%; 
    margin: 0px; 
    height: 700px; 
} 
} 

내 장치 폭이 720px 이하이면 홈 버튼 크기가 700px로 확대됩니다. 그러나, 내 에뮬레이터 중 2 개를 테스트 했음에도 불구하고 각각 크기는 1024px 및 480px입니다. 두 에뮬레이터의 홈 버튼은 700px 높이에 있습니다.

은 또한 다음

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 

내 jsfiddle있는 가장 중요한 일을 추가했습니다. 우려 내가 어떤 실수를하면 내가 jsfiddle

Answer 1

**UPDATE** 

확인 Jsfiddle에 시즌 사용자 아니에요 나를 용서하고 프로젝트에서 그 CSS를 추가하고 알려

http://jsfiddle.net/arunberti/jNZEL/

희망이 당신에게

@media screen and (max-width: 1024px) { ..styles go here } 

@media only screen and (min-device-width: 768px) and (orientation: portrait), 
screen and (max-width: 994px) { /* for tablets in portrait mode and desktops with less than 994px of horizontal browser width */ } 

@media screen and (max-width: 555px), 
screen and (max-device-width: 480px) { /* for desktops with less than 555px of horizontal browser width and devices with less than 480px wide (most phones in landscape orientation) */ } 

@media screen and (max-width: 320px) { /* anything less than 320px (primarily phones in portrait */ } 

하는 데 도움이 : 다음 사이트에서 사용되는 표준 미디어 쿼리입니다

를 사용하여 메타 태그뿐만 아니라