CODEWITHSUNDEEP
javascriptjqueryhtmlcssresponsive-design
Yugraaj Sandhu
Yugraaj Sandhu

Reputation: 434

Responsive design: Mobile version of site shows full version while loading

I'm trying to build mobile version of my website using CSS and jQuery. Website works fine but when page is still loading on mobile browser, it shows full version of website for a second then shows mobile version when page is fully loaded. Last time even I made different website for mobile for same domain name using:

if($(window).width()<500){window.loacation('mobile.webtsite.com')}

still I have the same problem. But this time what I am doing is:

 if($(window).width()<500){
        $("#linkCss").attr('href','styles/mobile.css');
        var high=$(window).height()*60/100;

Upvotes: 1

Views: 204

Answers (2)

Dan Philip Bejoy
Dan Philip Bejoy

Reputation: 4391

Try placing your script tag with the above code before the body of the page in your head tag.

<head>
<script>
  if($(window).width()<500){
  .
  .
  .
  }
</script>
</head>
<body></body>

Upvotes: 0

Paolo
Paolo

Reputation: 734

Just call your function before the document ready statement.

<script>
   thisWillFireImmediately();

   $(function() {
      thisWillFireOnDocumentReady();
   });
</script>

for more infos: Running jQuery code before the DOM is ready?

Upvotes: 2

Related Questions