Solved

Using @media screen queries

Posted on 2014-10-10
1
175 Views
Last Modified: 2014-10-20
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!
0
Comment
Question by:Thunderman54
1 Comment
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40373971
No, media queries are based on device width and height only and not the device type.
Depending on what type of device you want to detect you may get away with using js to change the background at the client side
http://www.abeautifulsite.net/detecting-mobile-devices-with-javascript/
0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Redirect HTTP to HTTPS in Azure 4 62
Swiper slider stops between pages 11 49
JQuery tracking event. 3 66
Video on my site 4 68
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

776 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question