-1

I recently made a website and for what ever reason it looks really odd on moblie with over lapping Divs etc. I coded this:

   window.addEventListener("resize", function(){
    var width  = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    if (width <= 1632 ) window.location.replace("https://officialivytech.com/mobileindex.html"); 
  });
So when javascript detects a display under 20" inches it will switch to a mobile version of the site. I have a 24" inch monitor and would like to know how to get it back to the normal index.html when it detects my 24 inch not my 20" inch monitor. If anyone knows I would be greatful. Thanks ,joshy.
ThatCoder124
  • 1
  • 1
  • You may not have looked at these https://www.w3schools.com/cssref/css3_pr_mediaquery.asp and https://stackoverflow.com/questions/3437786/get-the-size-of-the-screen-current-web-page-and-browser-window –  Oct 18 '20 at 12:59

1 Answers1

0

  1. Inch is not used for responsive design. Px is important. A screen can be big but its pixel value can be low. So don't use inch.

  2. Your function is triggered when you resize the browser. If you want to set all changes on page load, you should create the same function and call it when the page finishes loading.

  3. Creating a different index file for a mobile view is a very bad practice, unless you hide something very heavy on mobile, or creating a completely different web page. Almost all layout and design changes can and should be done in CSS.

Bulent
  • 2,187
  • 1
  • 8
  • 15
  • The reason I made a mobile version is becuase I used some complex html code.I basically used divs that overlap pictures and it looks all messed up.Also could you wirte me this code if possible please? – ThatCoder124 Oct 18 '20 at 13:02