1

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;
ata
  • 2,874
  • 5
  • 17
  • 28
Yugraaj Sandhu
  • 212
  • 3
  • 11
  • it would be fine if you using media queries instead. Or the script should be done ***before*** loading the dom - that means what it does is just including some mobile version CSS resource, nothing involving the DOM (which has not been loaded). – King King Apr 01 '17 at 04:21

2 Answers2

2

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?

Community
  • 1
  • 1
Paolo
  • 654
  • 7
  • 21
0

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>
Dan Philip
  • 3,729
  • 1
  • 11
  • 30