Buyer requires a single sample webpage that when viewed on iPad, iPhone IE or Firefox, the result of scaling and moving divs will be the same. You MUST have either an iPhone or iPad to complete this job, otherwise you WILL fail as simulators DO NOT work sufficiently accurately.
The sample webpage will have 5 divs
The first div is position absolute, and sits at the bottom right of the page, and has 6 control buttons on it. Up, down, left, right and +, -.
The second div is a jQuery draggable div... which will give a mouseup screen location, when dropped that is accurate for the visible screen... i.e. top left is 0,0, bottom right is NATIVE resolution of screen.
The other 3 divs are nested ... and have an image and a div in the middle.
<div id='Move' style='position:absolute; left:0px; top:0px'>
<div style='position:relative; '>
<div id='Scale' style='position:absolute; height:2000px; width:2000px;'>
<img src='images/[url removed, login to view]' style='position:absolute; width:100%;' />
<div style='position:absolute; left:20%; top:20%; width:10%; height:5%' />Hi there</div>
I need ALL iPad/iPhone 'smart viewing stuff' disabled COMPLETELY. i.e. there should be NO scaling, no zooming, no touch movements of the background. In addition there should be no scrollbars visible in any browser. We are taking over all functionality. The first div should therefore sit at the bottom right irrespective of the orientation of the phone/pad.
When the view is initially seen then, in all 3 browsers (safari mobile, IE, Firefox), the first div should be bottom right, and the [url removed, login to view] should fill the screen, and disappear off to the right and down (if your native resolution is < 2000*2000).
Clicking on the +- will change the scale of the 'scale' div by 10%. NOTE: When scaling, the CENTRE of the screen should remain centred.
Clicking on up/down/left/right should move the 'move' div by ~10% in the appropriate direction.