Screens with 1024px width and Tablets of 1024px width are conflicting

Question

I am using MediaQuery to create a responsive website layout as you will see below, everything works fine apart from one evil problem!

core.css is applied to the site by default and it is the style-sheet for the desktop version. But as you can see in this link, when the screen width is 1024px or below it will link to the tablet-and-mobile.css so it applies the tablet and phone styles. <link rel="stylesheet" type="text/css" media="screen and (max-width : 1024px)" href="assets/css/tablet-and-mobile.css"/>

The problem is that many users still user desktops with a screen that have the width of 1024px and tablets width is also 1024px! The fact the both screens have the same width is conflicting the whole system as when the website is visited from a desktop of a screen with width 1024px it applies the tablet version.

@media screen and (max-device-width: 1024px)

I have tried everything I could! but can't seem to be able to fix it. What would you recommend? Here is a live template: www.loaistudio.com

And why is that a problem? 1024px are 1024px, no matter what device I’m using – so why is your layout not suitable for both scenarios? — CBroe, Dec 03 '13 at 12:02
The tablet version basically changes almost everything like the header and make everything touch friendly so it is suitable for tablets and phones, it is not really desktop friendly specially these old ones that have a width of 1024px. So basically I am trying to show the tablet version only when you are on a tablet — , Dec 03 '13 at 12:06
CBroe maybe the problem is that the desktop version is too heavy, so he want to verify if the device is a mobile or a desktop. I really don't know how to check what kind of device you're using (don't know if it's possible) but with your code, the device doesn't matter, so if the width is 1024px in mobile, desktop or any device else, it will apply those css rules. You got here a nice question, hope someone can help you, cause I want to know the answer too :) — luidgi27, Dec 03 '13 at 12:08
then why don't you change the max-width to a value less than 1024px? ``. That way, it will not lay out the tablet view for desktops with width 1024px. — Vikram Deshmukh, Dec 03 '13 at 12:09
luidgi27 Thank you me too! - @srvikram13 I tried that but it will then apply the desktop version on the tablet - which is definitely not what we want. — , Dec 03 '13 at 12:16
I'm of the same mind as @CBroe - 1024 is 1024. However, if you want to make your site more "touch" friendly (larger hit areas) on touch devices, then try adding Modernizr with touch detection. It will add a class of 'touch' to the HTML tag which will give you another flag to base your styling off of - http://modernizr.com/download/#-touch-cssclasses-teststyles-prefixes — Adam Jenkins, Dec 03 '13 at 12:27

Anton Laptashev · Accepted Answer · 2013-12-03T14:39:05.673

3

You may try the following: @media screen and (max-width: 1024px) and (min-resolution: 120dpi) This MQ should work for most tablets, but won't for laptops with screens larger than 10.5 inches, which covers most of the cases. Not an ideal solution, but worth a try. DPI calculator might help.

For your case might look like: <link rel="stylesheet" media="screen and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 1.25),(min-resolution: 120dpi)" href="assets/css/tablet-and-mobile.css" />

NOTE: refer to - https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#resolution

edited Dec 03 '13 at 14:39

answered Dec 03 '13 at 12:40

Anton Laptashev

151
3

Oh, forgot 1 more thing. Pleasy try this MQ: @media screen and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1.25),(min-resolution: 120dpi). "min-resolution" won't work everywhere. – Anton Laptashev Dec 03 '13 at 12:54
Nope, when I place it it ignores all the tablet-and-mobile.css – Dec 03 '13 at 12:56
And what is the screen resolution and size of the tablet you are testing? – Anton Laptashev Dec 03 '13 at 13:07
works for the device I'm testing against. – Anton Laptashev Dec 03 '13 at 13:43
This works! I have tried it on an Ipad and an Iphone and the tablet-and-mobile.css has been applied, however the tablet-and-mobile.css is being completely ignored on desktops which I don't think it is a problem I believe, what do you guys think? Also can we really rely on this method? – Dec 03 '13 at 16:24

score 1 · Answer 2 · answered Dec 03 '13 at 13:58

What about trying something like this with the

   @media only screen 
       and (min-device-width : 768px) 
       and (max-device-width : 1024px) 
       and (orientation : landscape) {
       /* Styles */
    }


   @media only screen 
       and (min-device-width : 768px) 
       and (max-device-width : 1024px) 
       and (orientation : portrait) {
       /* Styles */
    }

score 0 · Answer 3 · answered Feb 15 '15 at 11:17

The easier way is to make 2 different media query for 1024px like this :

@media only screen and (max-width:1024px) {
       /*This will show only the desktop Css rules with dimension of 1024px */    

}

@media only screen and (max-device-width:1024px) {
       /*This will show only the tablet Css rules with dimension of 1024px*/    

}

Creating distinctions like this works, I have tried and it works like charm. Hope this works for you.

Screens with 1024px width and Tablets of 1024px width are conflicting

3 Answers3

Linked