반응 형 사이트는 모바일에서는 작동하지 않지만 데스크톱에서는 작동합니다.

Question

응답 가능한 Wordpress 사이트 인 http://www.allisoncassels.com/Test/을 개발 중이며 미디어 쿼리에 문제가 있습니다.

나는 다음 중단 점에 대한 CSS를 코딩 :

바탕 화면에서

/* Portrait Tablets */ 
@media only screen and (min-width: 768px) and (max-width: 959px) 

/* Portrait Mobiles */ 
@media only screen and (max-width: 767px) 

/* Landscape Mobiles */ 
@media only screen and (min-width: 480px) and (max-width: 767px) 

, 모든 것이 멋지다. 내 휴대 전화 및 태블릿에서 일부 항목은 모바일이고 일부 항목은 여전히 ​​데스크톱처럼 표시됩니다 (표시되는 항목 : 표시 안 함, div 너비 등)

알아낼 수있는 유일한 점은 다음과 같습니다. 그것은 내 휴대 전화/태블릿과 관련된 망막 디스플레이,하지만 그 요인으로 계산에 다른 사이트를 볼 수 없어 ...

정말 당황 스럽네요, 지금은 어떤 도움을 주셔서 감사합니다. 감사합니다

Answer 1

이 워드 프레스 테마 Avando 이미 응답 :

http://themefurnace.com/themes/?theme=Avando 

가 제대로 표시되지 않는 몇 가지 추가 CSS를

Answer 2

봅니다 요소 주위에 컬러 CSS는 국경을 추가를 만들 필요가 없습니다, border:thin red solid; 또는 background-color을 변경하여 CSS 선택기가 사용 중인지 알아보십시오. 또한, 페이지에 대한 링크를 넣고 문제가있는 요소와 테스트중인 장치/장치 브라우저를 지적하면 유용합니다.

Answer 3

업데이트

나는 지난 밤에 근무하고 있었고, 난 그이 파일이 제대로 전파되고 영향을 미치는이라고 생각하면서 내 웹 호스트의 서버가 충돌했다가 ... 모든 응답 코드는 오늘 완벽하게 작동합니다.

Answer 4

머리 속에 넣어주세요! : P

메타 태그 내부.

이름 = "뷰포트"내용 = "너비 = 장치 폭, 초기 규모 = 1, 최대 규모 = 1"/>

건배, 마크

당신은이 메타를 추가해야

Answer 5

<meta name="viewport" content="width=device-width, initial-scale=1"> 

것은 아이폰 6/6 플러스와 애플 시계 CSS이 미디어 쿼리를 미디어 쿼리 시도

@media only screen and (min-device-width: 375px) 
and (max-device-width: 667px) 
and (orientation: landscape) 
and (-webkit-min-device-pixel-ratio: 2) 
{ } 

아이폰 6 세로

@media only screen 
and (min-device-width: 375px) 
and (max-device-width: 667px) 
and (orientation: portrait) 
and (-webkit-min-device-pixel-ratio: 2) 
{ } 

아이폰 6 플러스 풍경

@media only screen 
and (min-device-width: 414px) 
and (max-device-width: 736px) 
and (orientation: landscape) 
and (-webkit-min-device-pixel-ratio: 3) 
{ } 

아이폰 6 플러스 초상화

@media only screen 
and (min-device-width: 414px) 
and (max-device-width: 736px) 
and (orientation: portrait) 

과 (-webkit 분-장치 - 피 ixel 비율 : 3) {}

아이폰 6, 6 플러스

@media only screen 
    and (max-device-width: 640px), 
    only screen and (max-device-width: 667px), 
    only screen and (max-width: 480px) 
    { } 

애플 시계

@media 
    (max-device-width: 42mm) 
    and (min-device-width: 38mm) 
    { } 

이미지에 대해 내가 할

img { 

    max-width: 100%; 
    }