Distinguishing desktop from iPad in a landscape setting using media queries

As I work on developing a website with responsive design, I am facing the challenge of differentiating the layout between tablets in landscape mode and desktops using media queries. The current media queries I have are:

<link href="base.css" rel="stylesheet"/>
<link href="desktop.css" 
media="only screen and (min-width: 801px)" rel="stylesheet"/>
<link href="tablet.css" 
media="only screen and (min-width: 629px) and (max-width: 800px) and 
(orientation:portrait), 
only screen and (min-height: 629px) and (max-height: 800px) and 
(orientation:landscape)" rel="stylesheet"/>

The issue I'm encountering is that the desktop.css stylesheet is being applied to tablets in landscape mode. With iPads in landscape mode having a width of 1024px, which is common for PCs, how can I differentiate a 1000px wide desktop from a tablet in landscape mode using media queries?

P.S. It's important for me to use media queries as the website will be cached and CDNed, making server-side detection ineffective.

P.S.2. 

<link href="desktop.css" 
media="only screen and (min-width: 801px), 
not only screen and (min-height: 629px) and (max-height: 800px) 
and (orientation:landscape)" rel="stylesheet"/>

Despite attempting the above solution, the issue remains unresolved.

cssmedia-queries

Answer №1

I am excited to incorporate Detectizr, an essential plugin that complements Modernizr

https://github.com/barisaydinoglu/Detectizr

For example:

// This adds the html classes: 'desktop', 'tablet' or 'mobile' for easier styling
Modernizr.Detectizr.detect({ detectDeviceModel: false, detectScreen: false, detectOS: false, detectBrowser: false, detectPlugins: false });

// There is a workaround needed here, as modernizr can cut off part of the necessary 'ui-mobile' class for jquery mobile
$("html").removeClass("ui-");
$("html").addClass("ui-mobile");

This results in an html tag like this:

<html lang="en" class="js tablet ui-mobile    landscape">

Utilizing the classes 'desktop' and 'tablet' will greatly improve our styling possibilities

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

Steps to create inactive HTML with a loading GIF displayed

When the sign-up button is clicked, a modal pops up. After inputting data, upon hitting the "sign up" button, I would like the actual popup's HTML content to become inactive and display a loading GIF icon in the center until an AJAX response is receiv ...

javascriptjqueryhtmlcssajax

What is the best way to remove an active class by clicking in my specific situation?

I was working on creating a gallery of Unsplash images that would display a full-screen image when the user clicked on a small image. I implemented a modal window that should appear when the user clicks on the small image, and I wanted it to close when the ...

javascriptcssreactjsonclickmodal-dialog

Adjust the vertical size of a table cell

I am currently working on code that was written by someone else and I am facing an issue with a 3 block element that needs to be modified. My goal is to change the height of the first block so that it only goes as big as the image inside it. Despite my e ...

htmlcssemailhtml-email

execute the function whenever the variable undergoes a change

<script> function updateVariable(value){ document.getElementById("demo").innerHTML=value; } </script> Script to update variable on click <?php $numbers=array(0,1,2,3,4,5); $count=sizeof($numbers); echo'<div class="navbox"> ...

phpjavascripthtmlcss

What is the best way to design a page with a fixed dimension element and a flexible liquid element?

Is there a way to achieve the layout described below without relying on tables? Left element (100px) | Right element (occupies remaining space, even with no content) Thank you! Edit: Here's the link to the code: http://pastebin.com/vU33jNxD ...

csslayout

What is the best way to implement a modal that can toggle dark mode using the Konami code, with the added functionality of a close button?

Recently, I attempted to create a Modal window that would activate when the Konami code (↑↑↓↓←→←→BA) is typed. As someone new to JavaScript, I'm still learning and open to feedback. While I have the coding part figured out, I need assi ...

javascripthtmljquerycssmodal-dialog

What is the best method to make a hyperlink within an IFrame open in a new window?

Let me share the code I've been working on: <!DOCTYPE html> <html> <head> <base target="_blank"> </head> <body> <div style="border: 2px solid #D5CC5A; overflow: hidden; margin: 15px auto; max-width: 800px; ...

javascriptjqueryhtmlcssiframe

Grid of images as background using Bootstrap

Currently delving into the world of bootstrap and online tutorials, I have a desire to construct a webpage using solely images as the background. The goal is to create a mosaic-like effect with no borders or space between them. Despite experimenting with ...

htmlcsstwitter-bootstrapcakephp

Solving issues with Tailwind CSS class names within Next.js

I'm currently working on a project built with Next.js and styled using Tailwind CSS. Unfortunately, I've run into an issue concerning classNames in my page.js file. I've double-checked my import statements, but the error persists. I'm s ...

cssreactjsmongodbnext.jstailwind-css

Is the line-height percentage relative to the viewport or the font size?

Can anyone help me understand the line-height property better? How does it work when set in %? When using: line-height: normal; line-height: 1.6; line-height: 80%; What is the percentage relative to? ...

css

Apply a border around every digit within a division

Is there a way to add a border to each individual number within a div? I already know how to add a border to a div as a whole, but I specifically want each number inside the div to be bordered. For example: <div id="borders">12345</div> The ...

phpcssstring

If the variable state is modified using setInterval, Angular animations will not function as intended

I am attempting to create an animation that changes the opacity of three arrows (intended for user interaction on my website). To achieve this automatically and repeatedly upon loading the webpage, I have implemented a setInterval function within ngOnInit. ...

javascripthtmlcssangulartypescript

Why does tagging P trigger popups in the DIV when the DIV contains another DIV?

JSBIN HTML <p> <div>123</div> </p> CSS p div{ background:#f00; } Encountering an odd issue here. When I input the HTML structure as shown below: <p></p><div>123</div> The CSS code fails to produce ...

htmlcss

Using jQuery: If the URL includes a specific string, then modify the background color of a particular tag

I need to dynamically change the background color of a tag in my code based on the URL. If the URL contains Suisse, I want the background color of the tag #switch-univers li a.bilgroup to be green. JS if (window.location.href.indexOf("Suisse") > -1) { ...

javascriptjquerycssbackground-color

Ways to create a back-and-forth transition across a sequence

Is it possible to create an animation that changes the width of an element once, then reverts back after a pause? I want this transition to occur over a three-second interval followed by a two-second delay. How can I achieve this? Below is the code I have ...

javascriptjquerycsstransition

Reposition the button alongside the textarea

Seems like this is a common inquiry. I am still learning the ropes when it comes to CSS and JavaScript. I have a textarea with a button beneath it, and I would like the button to stay aligned with the textarea as I resize it! Any suggestions on how I cou ...

htmlcsstextarea

Styling dates in React

How can I properly display the date in the correct format? I'm seeing the date displayed incorrectly on the screen as 32/03/2020, but the 32nd day doesn't exist. Below is the correct date format displayed in the image. I'm new to Reactjs, ...

cssreactjsreact-nativedatevalidation

Adjust the size of a textarea once text is removed

When you type text, a textarea expands in size. But what if you want it to dynamically decrease its height when deleting text? $('textarea').on('input', function() { var scrollHeight = parseInt($(this).prop('scrollHeight&apos ...

javascripthtmlcss

Interactive Radio Buttons with Visual Images

I'm exploring how to implement a set of images that function similar to radio buttons. The idea is that when a user clicks on an image, a check mark would be displayed below it to indicate selection. I think I can achieve this using an onclick event a ...

c#jqueryasp.nethtmlcss

What are the steps to include media queries?

My website looks good on big monitors, but not on smaller ones or on mobile phones. I need help with adding media queries to my CSS Reset so it works across all devices. Here's the website link and the CSS Reset code: html, body, div, span, applet, o ...

htmlcssmedia-queries