title: Javascript to get screen width in PHP variable
body: <p>I have a responsive site that has a <a href="http://www.red-team-design.com/simple-and-effective-dropdown-login-box" rel="noreferrer">simple drop-down login menu</a> when the site is in a "desktop" view (screen available width > 768) next to other navigational links. When the screen width drops below 768 the navigational links end up in a select option. The problem is that the drop-down login menu doesn't work from within a select option. </p>
  
  <p>I would like to use PHP to change the drop-down login menu to a simple <code>&lt;a href&gt;</code> link when the screen width gets smaller than 768.</p>
  
  <p>Right now I have in my page <code>&lt;head&gt;</code>:</p>
  
  <pre><code>&lt;?
  $screenWidth = '&lt;script type="text/javascript"&gt;document.write(screen.availWidth);&lt;/script&gt;';
  ?&gt;
  </code></pre>
  
  <p>In the <code>&lt;body&gt;</code>:</p>
  
  <pre><code>&lt;?
  if($screenWidth &lt;= "768") {
  echo '&lt;li&gt;&lt;a href="login.php"&gt;Log in&lt;/a&gt;&lt;/li&gt;';
  } else {
  ?&gt;
  &lt;div id="fancy"&gt;
  &lt;li id="login"&gt;
  &lt;a id="login-trigger" href="#"&gt;Log in &lt;span&gt;&amp;#x25BC;&lt;/span&gt;&lt;/a&gt;
  &lt;div id="login-content"&gt;
      &lt;form&gt;
          &lt;fieldset id="inputs"&gt;
              &lt;input id="username" type="email" name="Email" placeholder="Your email address" required&gt;   
              &lt;input id="password" type="password" name="Password" placeholder="Password" required&gt;
          &lt;/fieldset&gt;
          &lt;fieldset id="actions"&gt;
              &lt;input type="submit" id="submit" value="Log in"&gt;
              &lt;label&gt;&lt;input type="checkbox" checked="checked"&gt; Keep me signed in&lt;/label&gt;
          &lt;/fieldset&gt;
      &lt;/form&gt;
  &lt;/div&gt;                     
  &lt;/li&gt;
  &lt;? } ?&gt;
  </code></pre>
  
  <p>On my desktop, I have echoed the $screenWidth, which gives 1920. Therefore I would expect the "fancy" drop-down login menu to be displayed. (And it does).</p>
  
  <p>On my mobile, the $screenWidth echo gives 320. I would then expect the <code>&lt;a href&gt;</code> link to be displayed. (It does not - instead it displays the "fancy" menu).</p>
  
  <p>It seems odd that the variable when echoed in the body will give a different number, but when compared in the if statement it does not change the output.</p>
  
  <p>Is there a better way of changing the output?</p>
  
  <p><strong>Edit: jquery responsive menu code</strong></p>
  
  <p>jquery.responsivemenu.js:</p>
  
  <pre><code>(function($) {
  $.fn.responsiveMenu = function(options) {
      var defaults = {autoArrows: false}
      var options = $.extend(defaults, options);
      return this.each(function() {
          var $this = $(this);
          var $window = $(window);
          var setClass = function() {
              if ($window.width() &gt; 768) {$this.addClass('dropdown').removeClass('accordion').find('li:has(ul)').removeClass('accorChild');}
              else {$this.addClass('accordion').find('li:has(ul)').addClass('accorChild').parent().removeClass('dropdown');}
          }
          $window.resize(function() {
              setClass();
              $this.find('ul').css('display', 'none');
          });
          setClass();
          $this
              .addClass('responsive-menu')
              .find('li.current a')
              .live('click', function(e) {
                  var $a = $(this);
                  var container = $a.next('ul,div');
                  if ($this.hasClass('accordion') &amp;&amp; container.length &gt; 0) {
                      container.slideToggle();
                      return false;
                  }
              })
              .stop()
              .siblings('ul').parent('li').addClass('hasChild');
          if (options.autoArrows) {
              $('.hasChild &gt; a', $this)
              .find('strong').append('&lt;span class="arrow"&gt;&amp;nbsp;&lt;/span&gt;');
          }
      });
  }
  })(jQuery);
  </code></pre>