I need to have some portions of a web app I am building responsive to the iPad / iPhone devices.
I believe I only need to address some of the images. My thinking is to make "smaller" versions of the images & then use the navigator.userAgent property to determine which one to use based on device & change the img src property accordingly for the effected images.
. I would produce modified versions of the header image & the city skyline, to fit the pixel limitations of the iPad/iPhone devices.
I understand one can also use something like this: @media screen and (max-width: 1060px); I'm guessing several of these for the different widths of iPad, iPhone & iPhone 5, possibly one for portrait & one for landscape? See also this: http://stephen.io/mediaqueries/
Can someone give advice? I have looked on the web but don't seem to find a definitive answer.