css Question posted in
Some basic documentation can be found here.

How to use Desktop-Only CSS?

Is there a way to create desktop-only CSS? Or a way to work around this?

I have been looking at some media queries like these, but without luck so far:

@media (any-pointer: fine)
@media screen and ( -webkit-min-device-pixel-ratio: 0 )

Since I use desktop to simulate mobile as well (chrome dev tools), I cannot query high resolution. Because I want it to detect as desktop as well in my CSS.

Any ideas?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I figured out a way that does what I need:

    • Using @media (any-pointer: coarse) for touch screen only

    And I found out it is possible to simulate a mobile device as desktop in chrome dev tools:

    enter image description here


  2. 0

    you can do it by setting min/max width here is my example code. idk if it help you or not if it helps i am glad that i helped

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>changing element</title>
</head>
<body>
    <style>
        .example{
            background-color: red;
        }
        @media only screen and (min-width: 600px){
            .example{
            background-color: blue;
            }
        }
    </style>
    <p>If the device width is more then 600px then the div element will be in blue color. if the device width is less then 600px then div element is red
        put the code in code editor and resize the preview file window to check it
    </p>
    <div class="example">resize to see if i change color!</div>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search