2013-06-17 3 views
0

respond.js 작업을 만들기 위해 내 머리를 찢을 준비가되었습니다.Respond.js - 기능이없는 것 같습니다

우리는 모든 모바일 사이트에서이 코드를 사용합니다. 일반적으로 전혀 문제가 없지만 최근에는 매우 오래된 시스템 중 하나에서 모바일 호환성을 유지할 수 있어야했습니다.

내가 할 수있는 모든 것을 시도했습니다. 페이지에서 추가 코드를 모두 제거하고, 응답 할 수있는 대안을 시도했으며, 스크립트를 인라인으로 넣으려고 시도했으며, 로컬 호스트 복사본을 만들었습니다. 나는 을 알고있다. 그것은 바보 일 것이다. 그러나 나는 지금 그것을 볼 수 없다.

코드를 모두 제거한 후 전체 코드가 아래에 포함되어 있습니다. Chrome에서 정상적으로 작동합니다. respond.js도 적용되지 않습니다. 미디어 스타일에 모바일 스타일을 넣으면로드되지 않기 때문입니다.

로컬 문제가 아닌지 확인하기 위해이 모든 것을 서버에서도 시도했습니다.

누군가 바보 같은 실수를 저지를 수 있습니까?

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" id="property-results"> 
    <head> 
     <title>Search Results</title> 
     <link href="http://www.skitts.net/css/results.css" rel="stylesheet" type="text/css" /> 

     <script src="http://searchtest.issl.co.uk/js/respond.js"></script> 
    </head> 
    <body> 
     <div class="property clearing"> 
      <div class="property-info"> 
       <span class="address">CROWN STREET, WOLVERHAMPTON.</span> 
       <span class="price"> 
        <span class="pre-price"></span> 
        <span class="price-amount">&pound;10,500 Annually</span> 
        <span class="post-price"></span> 
       </span> 
      </div> 

      <a href="detailsLite.aspx?chainid=2047&propertyid=467168443" class="image" target="_blank" > 
       <img src="http://img.issl.co.uk/2047/008/thumbs/GRB-11MH0ZQA_3559464935.jpg" alt="Address" /> 
       <div class="status let">Let</div> 
      </a> 

      <p class="description">SEPARATE STORAGE YARD To the north of the units is an adjacent fully enclosed storage yard with separate vehicular access extending to some 1,961 sq.yds. (0.4 a...</p> 

      <ul> 
       <li>0 Bed</li> 
       <li>0 Bath</li> 
       <li>0 Reception</li> 
      </ul> 

      <a href="detailsLite.aspx?chainid=2047&propertyid=467168443" class="more link" target="_blank">View full details and photography</a> 

      <div class="ref-more"> 
       <span class="ref">REF: GRB-11MH0ZQA</span> 

       <a href="detailsLite.aspx?chainid=2047&propertyid=467168443" class="more button" target="_blank">See more</a> 
      </div> 
     </div> 
    </body> 
</html> 

답변

0

다음은 프로젝트에 대한 편집 된 바이올린입니다. 그것은 나를위한 "모든 브라우저에서 작동

Fiddle

당신이 당신의 머리 태그에 메타 뷰포트를 추가하는 시도 했습니까?

<meta name="viewport" content="width=device-width; initial-scale=1.0;"> 
+0

그래, 나는 그것을 추가하려고 노력했다. IE7에서 jsFiddle 자체가 작동하지 않습니다. * 결과 만 볼 수있는 방법이 있습니까? –

+0

오. 물론 구형 브라우저에서 웹 사이트를 표시하는 데 문제가있을 수 있습니다. IE 8 이하는 대부분의 미디어 쿼리를 지원하지 않습니다. 하지만 모바일 웹 사이트는 일반적으로 휴대 기기에서 볼 수 있도록 만들어 졌기 때문에 대부분의 모바일 브라우저가 미디어 쿼리를 올바르게 사용할 수 있도록 현대적이므로 아무런 문제가 없습니다. 하지만 이걸 찾았 어, 아마 너 할 수 있니? http://ghita.org/tipoftheday/css-media-queries-for-ie –

+0

그래, 그게 반응이야 .js가. 분명히 나는 ​​아무것도없이이 일을하려고 노력하는 것이 아닙니다. 이것은 두 개의 웹 사이트가 아닌 반응이 빠른 웹 사이트입니다. respond.js는이를 허용하고 99.99 %의 사이트에서 훌륭하지만 어떤 이유로 작동하지 않습니다. –

1

그것은 바보 같은 것을 말했다. 명백한 경우 이유는 respond.j가 다른 도메인의 스타일 시트로는 아무 것도 할 수 없습니다.

D' oh.

관련 문제