Skip to main content

Handling the orientation of screens in web pages

As part of responsive design a web page should react to the device it is being displayed on and make the most of the available screen real estate accordingly. With the advent of HTML5 & CSS3 the media tag for stylesheet links has been extended to cope with minimum screen heights and widths. It has also been extended to include "orientation", the following header block correctly loads/references the relevant stylesheet for the orientation of the website you are viewing.

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

This is functionality is live & dynamic; changing the orientation of an IPad whilst viewing a page that implements the above CSS will correctly change the CSS references depending upon whether you are now viewing the page in landscape or portrait. This also works on LCD monitors; even to the point of moving a web page between a dual screen desktop when one monitor is in landscape and the other portrait.

When working with browser windows that are not maximised this functionality even takes into account the width of the browser vs it's height. Dragging the size of the window, at an unknown preset ratio of browser window height vs width the loaded CSS will switch from portrait to landscape or vice versa.

Thanks to Smashing Magazine for the tip.

Comments

Popular posts from this blog

Mocking HttpCookieCollection in HttpRequestBase

When unit testing ASP.NET MVC2 projects the issue of injecting HttpContext is quickly encountered.  There seem to be many different ways / recommendations for mocking HttpContextBase to improve the testability of controllers and their actions.  My investigations into that will probably be a separate blog post in the near future but for now I want to cover something that had me stuck for longer than it probably should have.  That is how to mock non abstract/interfaced classes within HttpRequestBase and HttpResponseBase – namely the HttpCookieCollection class.   The code sample below illustrates how it can be used within a mocked instance of HttpRequestBase.  Cookies can be added / modified within the unit test code prior to being passed into the code being tested.   After it’s been called, using a combination of MOQ’s Verify and NUnit’s Assert it is possible to check how many times the collection is accessed (but you have to include the set up calls) and that the relevant cookies have …

Injecting HttpContextBase into an MVC Controller

It is a shame that when the ASP.NET MVC framework was released they did not think to build IoC support into the infrastructure. All the major components of the MVC engine appear to magically inherit instances of HttpContext and it’s related objects – which can cause no end of problems if you are trying to utilise Unit Testing and IoC. Reading around various articles on the subject just to get around this one problem requires the implementation of several different concepts and you are still left with a work around. The code below, along with the other links referenced in this article is my stab at resolving the issue. There’s probably nothing new here, but it does attempt to relate all the information needed to do this for Castle Windsor. The overview is that all controllers will need to inherit from a base controller, which takes an instance of HttpContext into it’s constructor. It then overrides the property HttpContext in the main controller class, supplying it’s own version…

Problem installing AWS CLI

It never feels like a good start when you're trying to start out with something and the install fails with an obscure error! I was just trying to install the Amazon CLI following the instructions at https://aws.amazon.com/cli/ and ran into the following error when running 'pip install awscli': Collecting awscli Could not find a version that satisfies the requirement awscli (from versions: ) No matching distribution found for awscli I appeared to have a correct version of Python installed (v2.7) and checking "PIP -v" indicated that 9.0.1 was installed. That all seemed to tick the required boxes but digging around a little more I did see that some people had had issues with various versions of PIP so I found / ran the following to upgrade to the latest vesion: curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py python get-pip.py This installed v9.0.3 of PIP which burst into life when I re-ran 'pip install awscli' and everything seems to be ok. Like…