Solved

Using @media screen queries

Posted on 2014-10-10
1
172 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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 learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

920 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now