Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Juan Luna
Juan Luna
11,483 Points

Meta Viewport just on Portrait?

Hi, I'm doing a website for a client and I need to do something weird for the responsive version: if I open the website in portrait the page should look responsive (with the media queries I already did); but if I look the page in landscape mode it should look like the desktop version (without "meta viewport" tag); I tried adding a conditional in my css ("orientation:portrait") but the landscape version doesn't look good because I have pixel units and percentages units and all that, I just need that the website ignores the meta viewport.

How can I do that?

Thanks.

1 Answer

Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

Hi, Juan. I'm not sure what you're trying to accomplish is possible. Because HTML is loaded when requested, the only way to affect the way things look is through media queries, for the most part. You might be able to find a JavaScript solution (some perhaps useful information here), but as far as I know, you won't be able to do it with HTML and CSS alone.

Juan Luna
Juan Luna
11,483 Points 
<script>
        if(screen.width<=500){
            $('head').append('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">');
        } else {
            $('head').append('<meta name="viewport" content="user-scalable=yes, initial-scale=0">');
        }
        $(window).on("orientationchange",function(){
          if(window.orientation == 0) // Portrait 
          {
            $('head').append('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">');
          } else // Landscape 
          {
            $('head').append('<meta name="viewport" content="user-scalable=yes, initial-scale=0">');
          }
        });
    </script>

This works perfectly :D

Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

Awesome to hear! :)