- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘Other’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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!
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/