-3

I have few devices like iPhone 11 Pro(1125 x 2436),Huwaui P30 Pro(1080 x 2340),iPad Pro (9.7-inch)(1536 x 2048). I want to write css that should work only for those devices not for laptop. I have written CSS but that also effect Laptop view since width is same. Here is the css below

style.css

@media only screen and (min-device-width:1080px) and (max-device-width: 1536px) {
  .show-mobile {
    display: block;
  }
}

index.html

<div class="show-mobile">
Show it for mobile only
</div>
UIAPPDEVELOPER
  • 583
  • 5
  • 18
  • 37
  • 2
    How are you defining which devices it should select? Do you want touch screen only? Do you want portrait only? I'm afraid there's no "iPhone,iPad,Huwaui" selector. – DBS Jul 21 '21 at 09:54
  • 2
    You’ll need to include another criterion besides the width then, for example the device pixel ratio. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ has a handy list of MQs to specifically try and target certain devices. – CBroe Jul 21 '21 at 09:55
  • 1
    Does this answer your question? [Media Queries: How to target desktop, tablet, and mobile?](https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile) – The Anonymous Koder Jul 21 '21 at 10:24
  • The goal of media queries is to make the html page look better. If a desktop user makes the width very small, then the page should still readjust. – The Anonymous Koder Jul 21 '21 at 10:26

1 Answers1

-1

i suggest you to design your page with css that is intended to the current screen size of you pc or monitor. Don`t use the @media functions in the stylesheet. just design the whole page according to your screen size. see that every thing is perfect and then add another file to your project named 'queries.css' and you can adjust your page for every device. use responsive page testing in chrome developer tools or firefox dev tools.

@media only screen and (max-width: 2560px) {

}

@media only screen and (max-width: 1920px) {

}

@media only screen and (max-width: 1440px) {

}

@media only screen and (max-width: 1080px) {

}

@media only screen and (max-width: 768px) {

}
sravanTG
  • 574
  • 5
  • 9
  • This is very opinionated advice and not an answer. – disinfor Jul 21 '21 at 17:02
  • you hava a better solution? – sravanTG Jul 21 '21 at 17:04
  • Yeah, look at the comments. Again, this is not an answer to the question asked and also opinionated - which has no effect on an actual solution. – disinfor Jul 21 '21 at 17:06
  • using media queries in the actual css file messes up the adjustments of the current or working screen size. using separate media queries makes it lot easier to design responsive pages. And pls don`t down vote an answer just so that you have the right to. pls understand the context of it. – sravanTG Jul 21 '21 at 17:10
  • I understand the question and your intent. However, the OP is asking for specific devices. Your answer does not solve that. And no, using media queries in the "actual css file" does not mess anything up. I know how to use media queries. – disinfor Jul 21 '21 at 17:12
  • I also didn't down vote because I can, I down voted because it doesn't answer the question. – disinfor Jul 21 '21 at 17:12
  • I'm not upset. I would not tell people to "chill". I'm explaining why I down voted. That is all. – disinfor Jul 21 '21 at 17:15