온라인 반응 형 웹 테스터

iphone/android/ipad 호환성이있는 사이트를 만들려고하고 있지만이 기기는 갖고 있지 않습니다. 나는 Responsinator를 사용했지만, 그것도 같은 내 아이폰 미디어 쿼리를 따기되지 않은 것으로 나타났습니다 :온라인 반응 형 웹 테스터

/* iphone */ 
@media only screen and (max-device-width: 480px) { 
    #wrapper { background-color: red; } 
}

#wrapper의 배경은 Responsinator의 아이폰 뷰어에 적색으로 표시하지만,에되지 않았습니다 실제 아이폰입니다. 좋은 무료 사이트 나 css 미디어 쿼리를 픽업하여 모든 기기를 소유하지 않고도 이러한 기기를 개발할 수있는 앱이 있습니까?

는

출처

2012-03-18 Nick B

그냥 브라우저 창 크기를 조정

는 개인적으로 나는이 코드를 사용? 테스트가 어려운 유일한 미디어 쿼리는 망막 디스플레이를 대상으로하거나 픽셀 비율이 1보다 큰 경우입니다 ('최소 장치 - 픽셀 비율'). 오, 당신은'max-device-width' 대신에'max-width'를 사용하기를 원할 것입니다. – powerbuoy

[Ripple] (http://ripple.tinyhippos.com/)이 재미있어 보입니다. 나는 그것을 너무 많이 사용하지는 않았지만 안드로이드 에뮬레이터 (끔찍한)에 비해 약간의 에뮬레이션이 괜찮은 것으로 보인다. –

난 당신이 max-device-width을 사용하고 있는지가 "정상"브라우저에서 포착하지 않는 이유는 생각 감사드립니다. 대신 max-width을 사용하면 IE가 아닌 "모든 곳에서"작동합니다.

모바일 코딩을 먼저 제안하는 것이 좋습니다. 가장 큰 해상도로 시작하여 뒤로 작업하는 대신 해상도가 커짐에 따라 가장 작게 시작하여 레이아웃을 향상시킵니다. 에서

/* Default */ 

/* Little larger screen */ 
@media only screen and (min-width: 480px) { 

} 

/* Pads and larger phones */ 
@media only screen and (min-width: 600px) { 

} 

/* Larger pads */ 
@media only screen and (min-width: 768px) { 

} 

/* Horizontal pads and laptops */ 
@media only screen and (min-width: 992px) { 

} 

/* Really large screens */ 
@media only screen and (min-width: 1382px) { 

} 

/* 2X size (iPhone 4 etc) */ 
@media only screen and 
     (-webkit-min-device-pixel-ratio: 1.5), only screen and 
     (-o-min-device-pixel-ratio: 3/2), only screen and 
     (min-device-pixel-ratio: 1.5) { 

}

: http://stuffandnonsense.co.uk/projects/320andup/

출처

2012-03-18 22:05:14 powerbuoy

고맙습니다. max-device-width가 범인입니다. –

온라인 반응 형 웹 테스터

답변

관련 문제