Ensuring Unique CSS for Diverse Devices: A User-Agent Driven Approach

I am facing multiple challenges and working towards finding solutions. I have developed a webpage and now I want to redirect the link to the CSS file based on the user agent.

`<script type="text/css" src="style.css">
 </script>`

However, instead of the regular "style.css", I would like to use "style-1.css", "style-2.css", "style-3.css", "stlye-4.css", and so on, depending on the user's device.

I came across this solution:

<?php if ((strpos($_SERVER['HTTP_USER_AGENT'],"iPhone")) || 
(strpos($_SERVER['HTTP_USER_AGENT'],"iPod")) || 
(strpos($_SERVER['HTTP_USER_AGENT'],"iPad")) || 
(strpos($_SERVER['HTTP_USER_AGENT'],"Android")) || 
(strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry")) || 
(strpos($_SERVER['HTTP_USER_AGENT'],"webOS"))) { ?>
<script type="text/javascript" src="skin_touch.js">
<?php } else { ?>
<script type="text/javascript" src="skin_mouse.js">
<?php } ?>
</script>

I believe this solution will work, but it frustrates me that different devices have various resolutions and retina displays.

In my CSS code, I have defined the width for different containers: the menu container has width:1000px, the middle container has width:600px, and the small one has width:300px;

The "style-1.css" will be used for large displays over 1000px (personal computers)

The "style-2.css" will be used for Android tablets with a display size ranging from 600px to 999px

The "style-3.css" will be used for Android and other smartphones with a display size ranging from 300px to 599px

The "style-4.css" will be used for iPads (1st generation & 2:1024×768 px (132 PPI), 9.7 inches), 3rd & 4th generation, & Air: 2048×1536 px (264 PPI), 9.7 inches

The "style-5.css" will be used for iPhone 1,2,3 with a resolution of 320x480; iPhone4 with a resolution of 640x960, and iPhone5 with a resolution of 640x1136

javascriptphpandroidcssipad

Answer №2

<?php
    $check = 0;
    if (strpos($_SERVER['HTTP_USER_AGENT'],"Android") && strpos($_SERVER['HTTP_USER_AGENT'],"Mobile")) 
    {
        $check = 1;
        require ("./index-mobile.html");
    }
    if (strpos ($_SERVER['HTTP_USER_AGENT'],"iPhone") || strpos($_SERVER['HTTP_USER_AGENT'],"iPod"))
        {
        $check = 1;
        require ("./index-mobile.html");
        }
    if (strpos ($_SERVER['HTTP_USER_AGENT'],"iPad"))
        {
        $check = 1;
        require ("./index-ipad.html");
    }
    if (strpos ($_SERVER['HTTP_USER_AGENT'],"Android"))
    {
        if (strpos($_SERVER['HTTP_USER_AGENT'],"Mobile"))
        {
          // This is a comment inside the codeblock.
        }
        else
        {
        $check = 1;
        require ("./index-tablet.html");
        }
    }
    if ($check == 0)
    {
        require ("./index-pc.html");
    } ?>

It brings me joy! (forgot about Windows Phone, perhaps we can include it with: require("some.html");)

or a string

< script type="text/javascript" src="skin_mouse.js">

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

JavaScript for loop similar to Python'sIn JavaScript, the

As someone who is new to programming, I primarily use Python but have now encountered a situation where I need to work with JavaScript for a project utilizing Phonegap. The query retrieved from the server looks like this: [["CompanyName", "lat", "long", ...

javascript

The chosen Material UI tab stands out with its distinct color compared to the other tabs

Just dipping my toes into the world of Material UI, so bear with me if this question sounds a bit amateur. I've been playing around with Material UI Tabs and successfully tweaked the CSS to fit my needs. Take a look below: https://i.stack.imgur.com/B ...

cssreactjsmaterial-uitabs

Browsing a container with JavaScript

I am attempting to display one div at a time and scroll through them repeatedly. I found and modified a Fiddle that works as intended, but when I try to implement it on my own test page, the divs do not scroll as expected. Here is the Fiddle example: http ...

javascriptjqueryhtml

The error message states: "TypeError: a.map is not a function"

I recently deployed my React JS app on Heroku and encountered some issues with the routing. While everything worked smoothly on my local host, I faced errors after fixing the routing problem that I couldn't resolve. Despite extensive research, I haven ...

javascriptnode.jsreactjsmongodbexpress

PHP Login and Cookies functionality specifically designed for the homepage

I started learning PHP just a week ago, but now I'm facing an issue. My PHP login and session script only work on the front page. When I test it by clearing cookies and typing in the browser to a specific page on my site (for example: www.mysite.com/p ...

phpcookieslogin-script

How to stop the HTTP Basic Auth popup with AngularJS Interceptors

In the process of developing a web app using AngularJS (1.2.16) with a RESTful API, I encountered an issue where I wanted to send 401 Unauthorized responses for requests with invalid or missing authentication information. Despite having an HTTP interceptor ...

javascriptajaxangularjshttpauthentication

Tutorial on displaying historical pricing data on a chart utilizing props in Vue Chartkick

I recently discovered a chart library called Chartkick for Vue projects. If you're interested, you can check it out here: In my project, I have data passed as props to a component. However, I encountered an issue where the prop couldn't be acces ...

javascriptvue.jschart.jsvuejs3chartkick

Harnessing the power of flexbox for data visualization

Trying to use flexbox to display data from a dataset in my code. Here is the code snippet: <div ng-app="myapp" ng-controller="FirstCtrl"> <div ng-repeat="name in names" class="graph-wrapper"> <div class="aside-1 content"> ...

javascripthtmlcssangularjsflexbox

Display modal within a React list

I need to display a list of items with an edit button for each item, which should trigger a modal showing the details of that specific item. Initially, I had a single modal component in the parent element and passing the visible values to the parent state ...

javascriptreactjs

Assistance requested in structuring JSON data

I'm currently working on making my javascript code more dynamic. Here's what I have so far: data.addRows(2); data.setValue(0, 0, 'name goes here'); data.setValue(0, 1, value 1 goes here); data.setValue(0, 2, value 2 goes here); data. ...

javascriptjqueryjson

Generating instances using TypeScript generics

Looking to create a factory for instantiating classes with generics. After checking out the TypeScript docs, everything seems to work as expected. Here's a simplified version of how it can be done: class Person { firstName = 'John'; ...

javascriptnode.jstypescriptgenericstypescript-generics

Error Message: SCRIPT5 - Permission Denied When Trying to Open PDF with Javascript

Despite searching through multiple posts on SO, I have yet to find a solution to my issue. We operate a web form within our LAN that utilizes Javascript's OPEN function to open PDF files. Up until recently, everything was working smoothly. However, ...

javascriptaccess-denied

Ways to retrieve a property that is dynamically generated within a React component

In the code snippet below, I have registered the TextField name as M1.${index}.M13-M14 and it is marked as required. However, I am unable to locate the property accessor using errors[`M1.${index}.M13-M14`]?.type, which prevents the error from being gener ...

javascriptreactjsreact-hooksmaterial-ui

Is there a way for me to utilize WordPress functions within my PHP script that is being called via AJAX?

Is there a way to make the 'POST' side branch of my PHP script 'WordPress-aware' so that I can call native WP functions from within it? The situation is as follows: I am trying to call a WordPress function (get_avatar($id)) from a PHP s ...

phpajaxwordpress

Achieving success with the "silent-scroll" technique

I've been struggling to implement the 'scroll-sneak' JavaScript code for quite some time now. This code is designed to prevent the page from jumping to the top when an anchor link is clicked, while still allowing the link to function as inte ...

javascriptjqueryhtmlcss

Awaiting fulfillment - Promise remains pending as loop executes queries

I have a scenario where I receive an array containing multiple data elements and need to perform a query for each element in the array. However, this is resulting in a promise pending response. How can I resolve this issue? What could be causing it? getFa ...

javascriptnode.jsexpress

Having trouble getting card animations to slide down using React Spring

I am currently learning React and attempting to create a slide-down animation for my div element using react-spring. However, I am facing an issue where the slide-down effect is not functioning as expected even though I followed a tutorial for implementati ...

javascriptreactjsreact-spring

Can this functionality be accomplished using only HTML and CSS, without relying on JavaScript?

Image for the Question Is it possible to create a zoom functionality using only HTML and CSS, without relying on JavaScript? I need this feature for a specific project that doesn't support JavaScript. ...

javascripthtmlcss

Adding parameters to a URL is a common practice

"Adding additional information to a URL that was previously included?" I apologize for the confusing title, but I can't find a better way to phrase it. Perhaps an example will make things clearer. Let's say I have URL 1: http://example.com/?v ...

phpjavascriptquery-string

Adding a JSON array to a ListView

I am new to Java programming language, so please forgive any obvious or silly mistakes I may have made. I am working on an activity in which I retrieve a JSON encoded string from a PHP file and display it in a simple list view. However, I am encountering ...

javaandroidjsonlistviewimport