title: Broken responsive design (on iPhone only) - can media queries be forced with javascript?
body: <p>I am having an issue with the responsiveness of my website on a iPhone. From the android and surface devices I have tested this site looks fine. But on Apple devices are giving me major problems.</p>
  
  <p>This is how my website is supposed to look on a mobile phone:</p>
  
  <p><a href="https://i.stack.imgur.com/3SKE2.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3SKE2.jpg" alt="Moonshine on a browser resized"></a></p>
  
  <p>This is my website inside a browser on a desktop computer:</p>
  
  <p><a href="https://i.stack.imgur.com/dBrD5.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dBrD5.jpg" alt="Moonshine on a PC"></a></p>
  
  <p><strong>HERE IS THE PROBLEM:</strong></p>
  
  <p>On an iPhone my website sort of goes responsive, but sort of doesn't - it looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/2TjhZ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2TjhZ.jpg" alt="Moonshine on a mobile :("></a></p>
  
  <p>Can anyone explain why this is happening?</p>
  
  <hr>
  
  <p>Looks to me like the iPhone is picking up some of the responsive rules, but not all of them. For more information I have this meta tag:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  </code></pre>
  
  <p>I have tried combinations of these CSS media query rules:</p>
  
  <pre><code>@media (max-width: 1100px) and (max-device-width: 1100px)
  @media (max-width: 1100px) and (max-device-width: 1100px) {
  @media only screen and (max-width : 767px)
  @media only screen and (min-width: 1024px) and (max-width: 1280px)
  @media only screen and (min-width: 993px) and (max-width: 1024px)
  </code></pre>
  
  <p>And alternating between all of these makes no difference, they all produce the same problems shown in the pictures above.</p>
  
  <p>I just want iPhones to pick up on my responsive rules correctly, like everything else does.</p>
  
  <p>Can anyone please help me to shed some light on this issue?</p>
  
  <p>I am really struggling with this, and have been for some time now. Any solution would be appreciated.</p>
  
  <p>I have tried lots of changes to my CSS, but to no avail. So now my current idea here is to try and use javascript to fix the problem.</p>
  
  <p>Is there any way to force a media query with javascript?</p>
  
  <p>Or is there any way I could use javascript to stop iPhones from displaying this website wrong?</p>
  
  <p>But I am not sure if this would work or help. I would prefer a CSS solution, but changing the CSS is making no difference at all, so in desperation I am hoping javascript will help me out.</p>
  
  <p>If it helps, check out the code here - <a href="http://www.moonshineandfuggles.com/" rel="nofollow noreferrer">http://www.moonshineandfuggles.com/</a></p>