1
부트 스트랩 3 및 미디어 쿼리를 사용하여 웹 사이트를 만들었습니다. 이것은 모바일의 첫 번째 접근 방식을 사용하는 기본적인 .css 미디어 쿼리 설정입니다. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">부트 스트랩 3 - 미디어 쿼리 태블릿 브레이크 포인트
내 브라우저 크롬과 파이어 폭스를 rezizing, 모든 브레이크 포인트가 예상 작품과 같이 또한
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}
나는 index.html을 모바일 뷰포트 최적화를위한이 메타 세트가 있습니다. 모바일의 경우 가로 및 세로 모두 모바일 버전이 표시됩니다. 그러나 삼성 갤럭시 탭과 Ipad에서 웹 사이트를 테스트하는 동안, 나는 실제 규모의 사이트 만 얻습니다.
태블릿에 잘못된 중단 점을 사용하고 있습니까? 또는 다른 것? 나는 그것이 모바일과 브라우저에서 작동한다는 사실 때문에 혼란 스럽다.
사실 나는 테스트중인 태블릿의 경우 가로 방향과 세로 방향 모두에서 발생합니다 ... 가로 방향 태블릿 모드에서도 이러한 현상이 발생할 것으로 예상됩니다. 나는 정제가 전혀 효과가없는 이유를 알지 못합니다. 메타 콘텐츠에 문제가있을 수 있습니까? – Sepi
전체 코드를 보지 않고 말하기는 어려울 것입니다. 사용되는 부트 스트랩 클래스에 문제가 될 수 있습니다. 휴대 전화에서 가로 모드로 사이트를 보는 방법은 무엇입니까? –
사이트는 찾을 수 있습니다. [here] (http://testurl321.site50.net/Stine_live/) 휴대폰의 가로 모드에서는 미디어 쿼리가 올바르게 적용되고 모든 것이 예상대로 보입니다. – Sepi