-2

I've got home.html and mobilehome.html and I wanted to change between the pages when you resized the screen to mobile widths.

if (screen.width <= 600) {
        document.location = "HomeMobile.html";
    }

Tried using this, it works for Responsive testing mode on chrome and firefox but not when simply resizing your window.

I tried doing them on the same page using viewport but i wanted to cut away the majority of page when changing to mobile to keep it clean.

Jeremy
  • 15
  • 3
  • 1
    Why not use actual responsive design? – ceejayoz Aug 12 '18 at 11:17
  • Explain? I tried doing them on the same page using viewport but i wanted to cut away the majority of page's html when changing to mobile to keep it clean. – Jeremy Aug 12 '18 at 11:20
  • 1
    So many examples to find here https://www.google.nl/search?q=javascript+switch+page+on+resize+debounce+site:stackoverflow.com – mplungjan Aug 12 '18 at 11:21
  • Those all show how to detect a change in the window size, which i've tried to use together with document.location = "HomeMobile.html"; but nothing happens. – Jeremy Aug 12 '18 at 11:23
  • Detecting window size and redirecting the page is literally the worst way to do this. Use CSS media queries instead, as the above commenters suggest. Ignore any answer to this question, sure they may solve your immediate issue, but that solution is inherently flawed. – Rory McCrossan Aug 12 '18 at 12:26

4 Answers4

1

When you resize the window, that's all you're doing, resizing the window. You're checking for the screen width which stays constant at your monitor resolution, so that's why it isn't changing.

Rob Kwasowski
  • 2,690
  • 3
  • 13
  • 32
1
<link rel="alternate" media="handheld" href="/path/to/mobile.page" />

Use this code to redirect handheld devices to another page.

Kalyan
  • 187
  • 2
  • 14
1

By calling screen.width, you are referring to the width of the physical screen in pixels. To get the viewport width, use window.innnerWidth:

if (window.innerWidth <= 600) {
  document.location = "HomeMobile.html";
}

Note that window.innerWidth includes the width of the scrollbar.

Although it is your choice, I would advice to use CSS3 Media Queries. If you redirect to another page while the user resizes the window, he/she will have to wait for the other page to load (which is annoying).

Wais Kamal
  • 5,858
  • 2
  • 17
  • 36
1

Solved, thanks for the hints everyone. Original Post: jQuery: How to detect window width on the fly? by Rob W

    $(document).ready(function () {
        var $window = $(window);
        var $pane = $('#pane1');

        function checkWidth() {
            var windowsize = $window.width();
            if (windowsize < 600) {
                //if the window is less than 600px wide change to mobile page.
                    document.location = "HomeMobile.html";

            }
        }
        // Execute on load
        checkWidth();
        // Bind event listener
        $(window).resize(checkWidth);
    });
Jeremy
  • 15
  • 3