-3

Hopefully this is a simple question. I created 3 html files based on different sizes. Basically what I want to do is load a specific page depending the size (width) of the clients computer/smart phone.

For example put in main index.html something like

If (page.width < 321)
Load index320.html
Else if (page.width > 320) and (page.width < 481)
Load index480.html
Else load indexother.html
F U
  • 91
  • 1
  • 8

3 Answers3

1

My best guess is to do this with a XMLHttpRequest.

First decide which page you should load. After that, load the page. For example:

var width = window.innerWidth;
var page;

if (width < 321) {
    page = 'index320.html';
} else if (width >= 321 && width < 481) {
    page = 'index480.html';
} else {
    page = 'indexother.html';
}

// http://stackoverflow.com/questions/3038901/how-to-get-the-response-of-xmlhttprequest
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == XMLHttpRequest.DONE) {
        // do some stuff with the content
        alert(xhr.responseText);
    }
}

xhr.open('GET', page, true);
xhr.send(null);
Pimmol
  • 1,871
  • 1
  • 8
  • 14
  • Well written and exactly what I was thinking of. Thanks! I assume this goes in javascript. I'll give it a shot. – F U Jul 20 '16 at 13:46
0

you should use media queries to check width of device and then use css to display you page in different way.

fernando
  • 814
  • 1
  • 9
  • 24
  • Probably true, but the OP might want the content to be different for each device size, not only the style. – grateful Jul 20 '16 at 13:09
  • I appreciate the answer, but I already figured that part out....the question is what is the line of code I need and where should be put etc. Like a small example. I wrote pseudocode cause I dont know the real code. There are too many half ass answers out there...I'd like to clean that up by asking simple questions and getting full answers so when someone does a search it might pop up :) If I knew I was gonna get minuses for asking a question I wouldn't ask and it makes one feel like they should never ask in fear of getting negative responses. :( – F U Jul 20 '16 at 13:15
  • Oh and yes you are correct grateful, different content for different device size. – F U Jul 20 '16 at 13:22
0

Starting with Pimmols answers above I came up with something simple that I used for now. I put this in the javcascript section of my HTML page.

<script>
  var width = window.innerWidth;
  var page;

  if (width < 321) {
    page = 'index320.html';
  } else if (width >= 321 && width < 781) {
    page = 'index480.html';
  } else {
    page = 'indexO.html';
  }

  //alert(width+page);  <-- used to test to see if it's actually working.
  var myWindow = window.open(page, "_self");

</script>
F U
  • 91
  • 1
  • 8