If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 1 of 1
Like Tree2Likes
  • 2 Post By Ronald Roe

Thread: Media Query Orientation

  1. #1
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Oklahoma City
    Member #
    959 times

    Media Query Orientation

    Just wanted to share a recent discovery of mine. I was working with the orientation feature of media queries, when I discovered that the orientation is determined based on the height/width ratio of the viewport window, not by some attribute passed by the device, as I previously thought. In other words, if the viewport is taller that it is wide, orientation returns as portrait, regardless of what type of device it's on.

    What does this mean? A couple of things:
    1. You don't need a device to test orientation-based media queries. You can simply test it by changing the width of your desktop browser window - as soon as the window is narrower than it is tall, the portrait orientation will trigger.
    2. The potential, especially with fluid-width, mobile-first design processes, for greatly simplified media queries.
    3. Much better targeting for desktop browsers by combining orientation:landscape with a min-width query.

    Anyway, thought I'd share.
    kralcx and AlphaMare like this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
All times are GMT -6. The time now is 11:17 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: