Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other @media screen queries

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #185990
    Thunderman
    Participant

    My question relates to using css @media screen queries. For example, I have a 10″ tablet that shares the same default screen resolution as my large 22″ desktop display monitor, That resolution is 1920 x 1080. The webpage I’ve designed – which basically is just a video player laid on top of a background image – looks and functions great on my 22″ desktop monitor, but not all that great on my 10″ tablet. Well, technically I guess it looks okay, but the usability of the video player becomes a little more awkward on the tablet (touch instead of mouse). So . . . is there some way that I can still use the @media screen query (or some other media query) to load a different background image for the tablet? In other words, I’d like to write a style sheet that would style the page differently for these two devices, even though they share the same screen resolution. Is that possible? Is there a way, for instance, to specify diagonal screen size in addition to pixel resolution in a style sheet in order to make this happen? I’ve just recently been introduced to media queries, so . . . there may be a very simple way to accomplish this that I’m just not aware of. (??) Thanks!

    #185993
    Senff
    Participant

    As you said, media queries are (in this case) only checking screen size, so yes, based on that 1920 width, you can’t make a difference between desktop and tablet.

    However…does the tablet have a retina screen? Meaning that when it’s 1920 physical pixels, it would actually check for a media query of 960 pixels wide.

    Note that you can also use the pixel density to check for the media query: https://css-tricks.com/snippets/css/retina-display-media-query/

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘Other’ is closed to new topics and replies.