How can certain HTML be redirected or hidden for users on mobile devices?

Lately, I've been putting the final touches on my website to present to potential employers as I will soon be starting my job search after graduation. I recently added an "about" section with parallax scrolling effect, but unfortunately, it's not functioning properly on mobile devices. You can see what I mean here:

My plan is to remove the parallax effect altogether for devices with a width less than 900px, or any other specified amount. Instead, I'd like to display a more traditional about me page. How can I use JavaScript to detect the device being used and show different HTML content or redirect to a separate page if necessary for those specific devices?

I would greatly appreciate any advice on the best way to address this issue. Thank you in advance for your help!

javascriptjqueryhtmlcss

Answer №1

After conducting some research today, I have developed a function to determine whether a device is mobile...

function checkIfMobile() {
    return (typeof window.orientation !== 'undefined');
}

This method checks if the device is mobile based on its ability to change orientation, a feature not commonly found in desktop devices.

I find this approach preferable as it eliminates the need to constantly update user agent values for new devices and browsers.

Furthermore, with many handheld devices now boasting high screen resolutions, relying solely on screen size for detection is no longer reliable.

Answer №2

If you want to redirect your website visitors to another URL, you can achieve this using JavaScript.


    <script type="text/javascript>
    
        if( navigator.userAgent.match(/(android|blackberry|ipad|iphone|ipod|iemobile|opera mobile|palmos|webos|googlebot-mobile)/i) )
        {
            document.location.replace("/mobile/");
        }
    
    </script>

Additionally, you can consider implementing a responsive web design.

This approach is beneficial for both user experience and SEO optimization.

Answer №3

checkMobileDevice: function(system) {
    if(system) {
        if(navigator.userAgent.match(system)) {
            return true;
        } else {
            return false;
        };
    } else {
        if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)) || (navigator.userAgent.match(/Android/i))) {
            return true;
        } else {
            return false;
        };
    };
}

Customized checkMobileDevice function for device detection

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

Prolong the ultimate position of the initial animation for the translated object

I understand that this question has been asked multiple times before, but I am seeking a fresh approach to these animations. Issue: The second box contains multiple animations, and I am trying to achieve the same effect as the first one. However, it seem ...

csscss-animationscss-transforms

Is it possible to customize individual CSS attributes for a section within a webpage's layout using a view?

When I render a partial 'calendar/show' in two different views, I'm facing an issue. In view A, everything looks perfect with the right font sizes, but in view B, the font size appears too large. I'm looking for a way to adjust the fon ...

htmlcssruby-on-railsruby

Generating images using Node.js and GraphicsMagick

I'm looking for a way to generate an image using graphicsMagick and node.js. Typically, I can achieve this with the following command: gm convert -background transparent -pointsize 30 -gravity Center label:türkçee HEEEEEY.png But I need to replic ...

javascriptnode.jsgraphicsmagick

Make sure your website design is responsive by setting the body to the device's

https://i.sstatic.net/3xHcx.png I'm struggling to make the body of my page responsive for mobile users. Whenever I try using this line of code, it just creates a messy layout. Any advice on how to fix this? <meta name="viewport" cont ...

htmlcss

The background image in the header does not fully extend to cover all of the header content

I am currently working on a website for a friend and I am facing an issue with the header section. The header is a div that contains two images inside divs, as well as the company name and slogan in separate divs. The main purpose of this header div is to ...

htmlcss

Guide to pre-populate a text field within a WKWebView on a website with the use of Swift

I am a beginner in the world of coding, specifically with Swift. My goal is to allow users to input their username and password in the settings section, which will then automatically populate the login page on a WKWebView that I have created. Currently, I ...

htmlswiftxcode

React-modal triggers the file-explorer upon exiting the dropzone

Within my project, I have implemented a button that triggers a modal to appear on mouse-over. This button is nested inside a dropzone element. https://i.sstatic.net/95dxy.png The issue arises when I exit the modal by clicking (not exiting with the escape ...

javascriptreactjs

Preventing Cross-Origin Domain Blockage in Google's Ajax Image Search API

I am a beginner with ajax. I attempted to use the ajax GET method for Google Image search (which uses a Deprecated API). However, my client specifically prefers the Deprecated API over Custom Search. When I send a request, I receive the following message: ...

jqueryajaxgoogle-search-apigoogle-image-search

The <select> element is experiencing compatibility issues with the camera controls in ThreeJs

I have been developing a ThreeJs application that includes a dropdown menu for user selections, resulting in changes to the displayed objects. However, I have encountered an issue where using the html select tag with camera controls (such as Trackball or ...

htmlthree.js

Error: An attempt was made to wrap a property called "find" as a function, but it is

I am currently implementing a test-driven development approach to run my tests. I have successfully run the same test on another application by copying and pasting it, but I encountered an error in this particular test: TypeError: Attempted to wrap unde ...

javascriptnode.jsmocha.jssinonchai

Unexpected Error: The axiosCookieJarSupport function is throwing a TypeError, functioning properly in Node.JS but not in .vue pages. What could

Struggling with a function that authenticates on a website, it runs smoothly in a basic node.js script but fails when executed from a .vue page within the NuxtJS framework. The error message received when running in the .vue page is TypeError: axiosCookie ...

javascriptvue.jsaxiosnuxt.jssession-cookies

The <h> tag gains height on its own accord

Here is my original code: <h4 class="orange2" ><a href="<?php echo base_url();?>v/<?php echo $this->uri->segment(3);?>/<?php echo $v['uniq'];?>"><?php echo trim(strip_tags($v['video_name']));?> ...

javascriptcsshtmltwitter-bootstrap

Load an external URL and load a file from the local directory using Electron

For an upcoming art exhibition, I have a video installation that consists of large videos (several GBs) and an online hosted web application. To conserve bandwidth during the exhibition, I am considering packaging the videos into an electron app. This way ...

javascriptelectron

The issue with jquery's marginTop functionality appears to be malfunctioning

Is there an easy way to vertically center text of unknown height within a div of known height? I've experimented with the css display: table-cell option without success, so I'm currently using jQuery to detect the height and apply a top margin if ...

jquerycsscentering

What is the best way to perfectly center text within an image, maintaining both vertical and horizontal alignment, all while being contained within an <a> tag?

I've been working with this code snippet. When I set the position of .thumb-title to absolute and use bottom: 50%, it shifts upwards in relation to its own height. .project-thumb { position: relative; } .thumb-title { font: 400 1.5rem 'La ...

htmlcss

Display or conceal various content within div elements using multiple buttons

I have a set of 5 image buttons, each meant to trigger different content within a div. When the page loads, there should be default content displayed in the div that gets replaced by the content of the button clicked. The previously displayed content shoul ...

javascriptjqueryhtmlcssshow

Setting the height of a div tag in CSS/HTML5 to match the current height of the browser window

Is there a way to make the height of my div tag always equal to the height of the browser's window, so it adjusts automatically when the browser is resized? I have tried using .class { height: 100%; } But this doesn't work. I've learne ...

javascriptjqueryhtmlcssresponsive

Issue with the display of JQuery slider within TypeScript Angular directive in C# environment

I am encountering an issue with implementing a JQuery slider in my application. When I use it solely with JQuery, it functions properly. However, when I incorporate it into an angular directive built with typescript, the display is not as expected. https: ...

c#jqueryangularjstypescriptslider

Remove a div element from a slider without permanently deleting or removing the div element from the DOM

Is there a way to dynamically remove slides from a slider (created with iscroll) while also being able to refresh the slider to restore all the original slides? What is the best approach for achieving this? This is how the HTML is structured: <div id ...

jqueryiscroll

Adding content to an Element Id using JavaScript can be done by utilizing the .insertAfter or .append methods. Since it involves a script tag, you cannot use the dollar sign

I need to include a script after a specific div in my HTML code. Here is what I currently have: <div id="uno">insert after this</div><br /> <p>this is a paragraph</p><br /> <div>this is a div</div> var mysc ...

javascripthtml