Webmasters Stack Exchange is a question and answer site for pro webmasters. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I've searched high and low for some way to setup my HTML5/CSS3 for various devices. Going by screen resolution isn't the best route because some times the screen size of one device is the same as another [e.g. my chrome book runs at 1280x800 and my android tablet runs at 1280x800] I'd want the website to look different for the tablet because it has touch capabilities meaning I can build a more "app like" design for that that I wouldn't want for my chrome book.

I've thought about the landscape vs portrait but that still doesn't get me there. @viewport and @media screen works to some degree as I can code for a browser vs mobile browsers but even the new iPhone/iPad has a higher resolutions than some legacy monitors.

I am truly stumped as to how I could code in a way to detect input type and load appropriately. (ie if touch display X if keyboard display Y)

share|improve this question
Please refer to the answer to this StackOverflow question: stackoverflow.com/questions/11387805/touchscreen-media-queries – toughskin Feb 15 '14 at 5:18
best answer I've found yet. Thanks for pointing me in the right direction! – john.weland Apr 1 '14 at 17:32

Have a look here: http://getbootstrap.com/css/#responsive-utilities-classes Maybe it can help you.

share|improve this answer
Welcome to Pro Webmasters! Whilst this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference. – John Conde Sep 18 '13 at 18:55

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.