Question

How can I show different IMGs in my HTML in a UIWebView, based on the iPhone’s orientation? (Sorry if this is a trivial question…)

Answer 1

It is pretty easy to do in CSS. There are media queries you can use to only have CSS applied to certain orientations. We do this in two ways, sometimes we will change the background image of a <div> or else we will have two <img> tags and just set the one we don’t want shown with display:none Here is sample code to set the background of a div with id=’funky’

<style type="text/css"> 
    @media only screen and (orientation:portrait){
      #funky {
        background-image: url(http://path/to/your/image1.png)
      }          
    }
    @media only screen and (orientation:landscape){
      #funky {
        background-image: url(http://path/to/your/other/image2.png)
      }          
    }
</style>