so non retina display have 320*480 / 480*320 on landscape mode
in the tutorial mentioned above you said = (Answer: 320px by 414px.)
i downloaded the picture and checked in photoshop, isnt the visible height in browsers is 356px? because of the header and footer panel of the browser, unfortunately i dont have any kind of smartphone to test this.
these header and footer panels in browser are same size in landscape mode also? so ill need to calculate 320-header+footer size in order to display all the content w/o scrollbars.