title: Chrome on iOS @media query has no effect with jQuery addClass
body: <p>It appears to me that iOS 14.8.1 does not honor my @media query, used in conjunction with jQuery addClass, in Chrome and Safari.  Following is my code, abbreviated for clarity:</p>
  <p><strong>CSS:</strong></p>
  <pre class="lang-css prettyprint-override"><code>    .outer_div
      {
          width: 100%;
      }
      .inner_div
      {
          width: 50%;
          margin-left: 30px;
          opacity: 0;
          transition: margin-left 0.3s, opacity 0.3s;
          transition-delay: 1s
      }
      .inner_div.opacity_1
      {
          margin-left: 50px;
          opacity: 1
      }
      @media (max-width:600px) 
      {
          .inner_div
          {
              width:100%;
              margin-left:40px;
              margin-right:40px
          }
          .inner_div.opacity_1
          {
              margin-left:40px
          }
      }
      @media (max-width:340px) 
      {
          .inner_div
          {
              margin-left:30px;
              margin-right:30px
          }
          .inner_div.opacity_1
          {
              margin-left:30px
          }
      }
  </code></pre>
  <p><strong>HTML:</strong></p>
  <pre class="lang-html prettyprint-override"><code>    &lt;div class=&quot;outer_div&quot;&gt;
          &lt;div class=&quot;inner_div&quot;&gt;
              Enough text to wrap.
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p><strong>JavaScript:</strong></p>
  <pre class="lang-js prettyprint-override"><code>    window.onload = function()
      {
          $('.inner_div').addClass('opacity_1');
      }
  </code></pre>
  <p>At a screen width of &lt;= 600px, the margins force an inner_div width of &lt; 100%.</p>
  <p>Expected desktop behavior is for inner_div to fade in and shift 20px to the right. Expected iPhone behavior is for inner_div to fade in and remain fixed in position with a margin-left of 30px due to the @media query. This is intended to avoid an annoying shift in the text content of inner_div that I expect on iPhone, because the text wraps differently with a margin of 50px than it does with a margin of 30px.</p>
  <p>Actual behavior on a desktop browser is as expected, both with normal viewing and with simulated iPhone viewing turned on.  Actual behavior on iPhone is that when the class opacity_1 is added to inner_div, its margin-left changes to 50px, and a word shifts to the next line during the transition.  So it appears to me that my @media query is being disregarded on iPhone.</p>
  <p>Thoughts?</p>