Screens with 1024px width and Tablets of 1024px wi

问题:

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

回答1:

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

回答2:

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 */
    }

回答3:

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.