Respond.js - seems to have no function
Question
I'm about ready to rip my hair out trying to make respond.js work.
We use it on all of our mobile sites, and usually there are no issues at all, but I've recently needed to make it possible to get mobile compatability going on one of our very, very old systems.
I've tried everything I could - I've stripped out all of the extra code from the page, tried an alternative to respond, tried putting the script inline, I've even made a localhost copy. I know it's going to be something stupid but I just can't see it right now.
The entire code, after stripping it all back, is included below - works fine in Chrome, as always. I know respond.js isn't even being applied, because if I put the mobile styles in a media query they don't load either.
I've tried all this on the server too, to make sure it's not a local issue.
Can someone point out the silly mistake please!
<!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">£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>
2 answers
solution1
1 2013-06-17 16:13:44
Told you it would be something stupid. For obvious reasons, respond.js can't do anything with a stylesheet on another domain.
D'oh.
solution2
0 2013-06-17 15:22:43
Here's the compiled fiddle for your project.
It works on every browser for me"
Have you tried adding a meta viewport to your head tag?
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.