Solved

Using @media screen queries

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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

708 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

13 Experts available now in Live!

Get 1:1 Help Now