How can custom CSS and JS be loaded in Sencha Touch based on the user's device - PC, tablet, or smartphone?

Is there a way to configure a webpage so that when the user is accessing it from a PC (using Safari/Chrome/Firefox), they see the "normal" version of the page, but if they are using an iPad to view the same URL, they get Sencha Touch (css, js) files in their browser? Should I use JavaScript Browser Detection with navigator, or does Sencha have a built-in solution for this? I am aware of Ext.env.Browser, but what if the user is using Safari on both their PC and iPad? Any suggestions are appreciated! Thank you!

javascriptcssipadsencha-touchnavigator

Answer №1

In my opinion, the most effective and efficient solution is to implement this feature on the server side. By examining the user-agent request header, you can determine which files to transmit. Alternatively, you could redirect to a separate subdomain, such as m.example.com. However, if you prefer to utilize Sencha for this task, I recommend checking out this informative article:

Answer №3

Illustration:

<script type="text/javascript>

    var isiPad  = navigator.userAgent.match(/iPad/i) != null;   
    var isiPhone    = navigator.userAgent.match(/iPhone/i) != null; 

        if(isiPad){
            alert("iPad device detected");
            //window.location = "http://www.google.com/iPad/"
        }if(isiPhone){
            alert("iPhone device detected");
            //window.location = "http://www.google.com/iPhone/"
        }else{
            window.location = "http://www.google.com"
        }

</script>

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

Arranging elements on a webpage using Javascript

Creating a Dynamic Div Layout with JavaScript I have successfully implemented functionality wherein clicking on + opens a div and clicking on - closes it. However, I am now faced with the challenge of handling multiple divs at runtime. How can this be ach ...

javascriptjquerycssjquery-ui

How is it possible for my search results page to retrieve the words I input?

Currently, I am in the process of creating the search result page and I plan to utilize dynamic routing for implementation. Here is a snippet of my search bar code: <Link href={`/productSearchResult/${searchWord}`}> <a className={styles.navbar_s ...

javascripthtmlreactjsnext.jsdynamic-routing

Ways to generate an Angular 7 component

Seeking guidance on creating an angular 7 component. I have forked a jsFiddle at this link: https://jsfiddle.net/gauravshrestha/fdxsywLv/. The chart in the fiddle allows data points to be dragged up and down. My goal is to convert this into a component whe ...

javascriptangulartypescriptchart.js

Merging text and a JSON object to retrieve the information

Having some trouble with a JSON object and retrieving values. This is the syntax that works for getting the data I need. dataJSON.companies[0].fields.Internet.length I want to dynamically evaluate the object using a string variable, like this... var me ...

javascriptjson

Navigating with Node.js and angular

I'm struggling with redirecting POST requests using Node.js, Express, and Angular. Typically, we'd use forms like this: index.ejs <!DOCTYPE html> <html> <head> <title>Redirect Example</title> </head> <bo ...

javascriptangularjsnode.jsredirectexpress

A guide to filtering a JSON array by email address with JavaScript

How can I identify distinct elements in a JSON array using JavaScript? Below is the example of my JSON array. I need to determine the size of unique elements. [ { "_id": "5aaa4f8cd0ccf521304dc6bd", "email": "<a h ...

javascriptarraysjson

Error encountered while trying to update a record using NodeJS, Express, and MySQL modules due to SQL syntax

When attempting to update a MySQL record in NodeJS, I encounter an "app crashed" error in Visual Studio Code's terminal. app2.js: const express = require('express'); const mysql = require('mysql'); // establish connection cons ...

javascriptmysqlnode.jsexpress

The functionality of res.send is not working correctly

Attempting to send a response from my express application to the front-end in order to display an alert. Here is what I have attempted in my app: if (info.messageId) { res.redirect('back'); res.send({ success: true }); } ...

javascriptnode.jsexpress

Text display appears uneven

After downloading the 'exo' font from Google Fonts, I was pleased with how it appeared on my htc smartphone. However, on my laptop screen, it looked as if a swarm of caterpillars had nibbled away at it. I attempted various techniques like anti-a ...

cssfonts

Attempting to modify the array content using useState, but unfortunately, it is not functioning as expected

Starting out with react.js and trying to update an array's content using useState upon clicking a send-button, but it's not working as expected. Struggling with adding date and number in the row. Check image here Here's what I'm aiming ...

javascriptarraysreactjsuse-state

Encountering a TypeError stating that the "option is undefined" error has occurred

Unexpectedly, my dropdown menu that was functioning perfectly fine is now throwing an error. I've made several changes and none of them seem to resolve the issue. Could it be a data type mismatch or am I missing something crucial here? Your insights ...

javascriptvue.jsdrop-down-menu

When using electron-build, the node-adodb encountered an error stating: 'Failed to spawn C:WINDOWSSysWOW64cscript.exe'

Utilizing node-adodb.js for reading .mdb files with the following code: const db = require('node-adodb') ipcMain.on('query', (e, p) => { if (!p) return appendFileSync('a.log', new Date().getTime() + ' ' + p.t ...

javascriptnode.jsvue.jselectron

The image is not displaying on the page

Slider Section (Gray Part) We verified after loading, and the data was spot on. In development mode (F12), we can inspect object information (ImgURL, Text, etc.). However, it is not being displayed. Below is the template code and script code. Thank you. ...

javascriptvue.jsaxios

Tips for connecting elements at the same index

.buttons, .weChangeColor { width: 50%; height: 100%; float: left; } .weChangeColor p { background: red; border: 1px solid; } .toggleColor { background: green; } <div class="buttons"> <p><a href="#">FirstLink</a></ ...

javascriptjqueryhtmlcss

Implement handleTextChange into React Native Elements custom search bar component

I need help with passing the handleTextChange function in the SearchBarCustom component. When I try to remove onChangeText={setValue} and add onchange={handleTextChange}, I am unable to type anything in the search bar. How can I successfully pass in the ...

javascripttypescriptreact-nativeexpo

The functionality of sending a response to a client in Node.js Express seems to be malfunctioning

I am facing an issue with sending a response back to the client. Despite not receiving any errors, it seems like the response is not working as expected. Can anyone help me figure out why? Below is my code snippet: exports.login = function (req, res, next ...

javascriptnode.jsexpress

"Trouble with kendo drop-down list: onclick event not triggering when text is changed

I am currently working with kendo UI and have implemented a dropdown list of checkboxes. The onchange event is triggering when the user clicks on the checkbox, but it is not firing when the user clicks on the text. Thank you in advance for your assistance ...

javascriptjquerycheckboxkendo-ui

Stepping up your design game by customizing the bootstrap container class for multiple pages

Looking for a solution to customize container-width, @gutter-width, and @column-width for two pages - landing and home? Let's discuss how to achieve this. Currently using less framework and merging all less files for production code deployment. Need ...

csstwitter-bootstrapresponsive-designgridless

How can the caption be aligned to the right of the image within a Bootstrap thumbnail in a precise manner, while also ensuring the button is positioned at the bottom of the caption?

Greetings! I am in the process of developing a website using bootstrap v3.3.2. My first query revolves around utilizing the grid system to correctly position the caption on the right side of the thumbnail, as illustrated below: <div class="container"& ...

htmlcsstwitter-bootstrapthumbnailscaption

Disabling the submit button after submitting the form results in the page failing to load

I am encountering an issue with my HTML form that submits to another page via POST. After the form validates, I attempt to disable or hide the submit button to prevent double submission and inform the user that the next page may take some time to load. He ...

javascriptphpjqueryhtmlforms