css/html responsive 및 viewport zoom issue

Question

메타보기 및 css3 미디어 쿼리에 html을 사용하여 모바일 브라우저에 반응하는 웹 사이트를 만들었습니다. 그것은 블랙 베리에서 완벽하게 작동하지만, IOS와 안드로이드 장치에서는 더 많이 확대됩니다. 그것은해야 할 일을 두 배로 만드는 것 같습니다. 나는 이것이 뷰포트 스케일과 관련이 있다고 읽었지 만, 스케일을 작게하면 블랙 베리와 다른 장치에서 엉망이됩니다. 나는 이것을 문자 그대로의 날 동안 찾으려고 노력했지만 많은 것들을 시도했지만 그것을 이해하는 것처럼 보일 수는 없다. 예를 들어 http://www.dribbble.com/이 도움이되는지 알고 싶습니다.

이 문제가 수정 되었습니까?

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

모든 도움이 감사합니다 : 당신은 여기 사이트 http://new.comedytime.tv/와 내가 사용하고 메타 뷰포트를 볼 수 있습니다! 탱크! :)

Answer 1

나는 당신의 문제에 대한 직접적인 해결책을 가지고 있지 않다. 그러나 나는 약간의 테스트를했다. 내 안드로이드 (FF 모바일, 안드로이드 4.0)에서 확인하고 올바른 줌에서 나타납니다. 다음은 홈 페이지 상단의 빠른 스크린 샷입니다. https://dl.dropbox.com/u/71993227/2012-08-20_10-10-12.png (테스트했지만 너무 많은 피드백을 보내고 싶다고 말씀하셨습니다.)

귀하의 뷰포트 태그는 내가 말할 수있는 것으로부터 올바른 것으로 보이며, 내 사이트에서이를 테스트하여 올바르게 작동합니다.

블랙 베리 및 기타 장치가 너무 작기 때문에 작은 화면 만 대상으로하는 다른 미디어 쿼리를 포함시켜야하고 CSS를 약간 조정해야 할 수 있습니다. 희망이 조금 도움이!

Answer 2

는

user-scalable = 0 

보다는

user-scalable = no 

이 모든 장치 해상도에서 작동해야보십시오. 하지만 줌이 비활성화됩니다.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> 

CSS 미디어 쿼리를 사용하여 모든 너비와 높이의 표시를 조정하십시오.