I developed a website and also created a mobile.html version, with the desire to seamlessly switch between the two based on screen

I have two files, home.html and mobilehome.html, and I am trying to switch between them when the screen width goes below a certain size.

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

This approach works well in Responsive testing mode on chrome and firefox, however, it does not function as expected when simply resizing the window.

I also attempted combining both pages using viewport, but I would prefer to hide most of the content when switching to mobile view to maintain a cleaner interface.

jqueryhtmlcssviewport

Answer №1

Simply put, resizing the window only affects the display of the content within it. The screen width remains constant at your monitor resolution, hence no actual change in size occurs.

Answer №2

<link rel="alternate" media="handheld" href="/path/to/mobile.page" />

This snippet of code can be utilized to direct handheld devices to a specific page.

Answer №3

When you call screen.width, you are essentially getting the width of the physical screen in pixels. If you want to retrieve the viewport width, you should use window.innerWidth:

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

Keep in mind that window.innerWidth also accounts for the scrollbar's width.

Although it's ultimately up to you, I recommend considering the use of CSS3 Media Queries. Redirecting to another page as the user resizes the window can result in a frustrating experience as they have to wait for the new page to load.

Answer №4

Issue resolved, grateful for the assistance from everyone. Initial Question: 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) {
                // Change to mobile page when the window is less than 600px wide.
                    document.location = "HomeMobile.html";

            }
        }
        // Run on page load
        checkWidth();
        // Listen for resize event
        $(window).resize(checkWidth);
    });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can we keep a portion of the input placeholder content?

The input box below accepts values in percentage form. To indicate this, I have set a placeholder that says Percentage (%). https://i.sstatic.net/LJ1ee.png My goal is to automatically add a % symbol to the value as soon as it is entered into the input fi ...

htmlcssbootstrap-4

Ensure that the method is passed a negative number -1 instead of the literal number 1 from an HTML error

This is an example of my HTML code: <button (mousedown)="onMouseDown($event, -1)"></button> Here is the TypeScript code for handling the mouse down event: onMouseDown(e: MouseEvent, direction: 1|-1) { this.compute.emit(direction); ...

htmlangulartypescript

If the button is clicked in jQuery, then perform a specific action; otherwise, execute

hello, I am encountering difficulties in getting this feature to function properly. I am utilizing cropbox to allow users to upload their logos. The issue arises when users do not click on the crop button again; it results in overwriting the existing file ...

javascriptjqueryif-statement

Issue with displaying content in AngularJS view set by a service

I'm currently facing a challenge in accessing the view with an expression that doesn't seem to be working correctly. Here is my Service: angular.module('myApp', []).service('myService', function($timeout){ this.sayHello = ...

javascripthtmlangularjsng-controllerangularjs-controlleras

Halt the program's process until the ajax request has finished

Struggling with what seems like a common issue of the "Asynchronous Problem" and finding it difficult to find a solution. Currently, I am working on a custom bootstrap form wizard which functions as tabs/slideshow. Each step in the wizard is represented b ...

javascriptjqueryajax

The sliding hamburger menu children fail to move in unison with the parent

I'm currently working on a dynamic sliding navigation menu that activates when the hamburger icon is clicked. However, I am facing an issue where the child <a> elements are not sliding along with the parent div. You can see how it currently loo ...

htmlcssreactjstypescript

What is the best way to position the logo on the left side and the navigation on the right

How can I position my logo to the left of the navigation bar? This is my current HTML code: <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="icon" type="image/png" href="SENCOR_Logo.ico"> & ...

htmlcss

How to successfully implement ng-show with Html5's <dialog> tags

It's incredible how simple Html5 dialogs are. It feels like they should have been here 15 years ago! I'm having trouble getting ng-show to work with dialogs. Any tips on how to make it happen? <!DOCTYPE html> <html ng-app="project"> ...

angularjshtmldialog

Logging in using Mechanize with a jQuery AJAX submission form in Python: A Step-by-Step Guide

Currently, I'm experiencing difficulties logging into the system due to the way the website is handling the form using jQuery and ajax in the following script: function form_login() { if($('#main form p.button.disabled').length) return ...

jquerypythonajaxmechanize

Utilizing phonegap/jQueryMobile to extract OpenCart products in JSON format is a simple process

Looking to retrieve the product catalog in JSON format from my OpenCart store through a phonegap mobile application using Ajax, JavaScript/jQuery. Is this something that can be done with OpenCart? Any suggestions, ideas, or sample code would be greatly ap ...

jqueryajaxjsonjquery-mobileopencart

Is there a way to work around the CORS policy in order to fetch data from URLs?

I have been developing a tool that can analyze URLs from an uploaded CSV file, search the text content of each URL, and calculate the total word count as well as the occurrences of "saas" or "software". The goal is to generate a new CSV file with the origi ...

javascripthtmlcsscsvcors

Troubleshooting problems with the CSS code for a progress bar in Gmail

I recently came across a unique progress bar design on Gmail and wanted to implement something similar. I found some code snippets on this webpage: . However, I encountered an issue where the progress bar was only displaying in Internet Explorer but not in ...

javascripthtmlcss

What is the best method to implement: should I opt for bind or live, or is there a different approach

Within my form, the button is coded like this: <button id="mybutton" type="submit"></button> I am using jQuery to submit the form when the button is clicked: $('#mybutton').click(function() { $('form#myform') ...

jquery-selectorsjquery

Unable to make changes to the data

Journey Route::resource('/videofile', 'VideoController'); VideoController public function update(Request $req, $id){ $video = Video::findOrFail($id); if($req->hasFile('UserVideo')){ $vid = $req->file(& ...

phpjqueryajaxhtmllaravel-5

Identifying activity on a handheld device

I am currently working on a website and I have noticed that it doesn't work as well on mobile devices as it does on desktop. There are performance issues that need to be addressed. I've seen other websites redirecting users to a different page wh ...

javascripthtmlcssmobile

Comparing identical elements in JavaScript

Crucial Note I want to clarify that I have no intentions of scamming, phishing, or causing any harm. My goal is to develop a website magnifier similar to using a magnifier on paper. Dilemma Let me paint the picture for you. I've effectively copied ...

javascripthtml

Can you explain the purpose of a <div> element that is empty except for the CSS property clear:both?

Can anyone shed light on the significance of this particular tag that I stumbled upon in a legitimate html document that I recently acquired? <div style="clear: both;">&nbsp;</div> I appreciate any assistance you can offer. ...

htmlcss

Ways to set a background image for two separate components in Angular

Trying to figure out how to integrate this design: The challenge lies in having a background image that spans across the navbar and the content below it. Currently, the code separates the navbar component from the content component, making it tricky to ac ...

htmlcssangular

Extracting the contents of a Span tag that lacks a class attribute and is not present in every element

I am currently utilizing Selenium in Python to scrape a review page on the web. Specifically, I am interested in extracting the rating of each review (for example, extracting 7 from 7/10 in a review). The structure of the HTML element looks like this: ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

How come my ejs files are all affected by the same stylesheet?

Currently, I am in the process of developing a nodeJS application utilizing Express, MongoDB, and EJS template view engine. The server.js file has been successfully created to establish the server. In addition, a separate header.ejs file has been implement ...

htmlcssnode.jsexpressejs