I decided it was time to test my design on a smartphone so I could see it live. Unfortunately I noticed that the design had changed dramatically from what I saw in DreamWeaver, in terms of the layout. This is due to the jquery.mobile-1.0.min.css, which had set the design’s “content” <div> to fit “85%” of the device that it is viewed on, which is why all of my images had collapsed from the 3-to-a-row rule that I had created. I changed it to 95% so it allows a more reasonable area for the design to fit in. I have also added extra code in the CSS so that the images will keep the aspect ratio/proportions. It seems that images in the header are restrained to a certain size as my logo is cut off after it reaches a certain width.
As you can see when comparing this to my previews during the design stage, the layout doesn’t match. The porsche logo has been cut off due to a restriction of the header’s width due to the additional button spaces on the left and right, and the cars are bigger than they are supposed to be.
if (screen.width >750) window.location.replace("http://www.porsche.com/uk/")
This will check the viewing device’s width, and if it is above 750 (iphone 4 is 320×480, iphone 5 is 640×1136, samsung galaxy s3 is 720×1280) then it will redirect the user to porsche’s website. This is what porsche does similarly on their website, as they have a mobile version for smartphones which you are redirected to. I tested it with a simple redirect to another .html file which had a line of text, and it worked as shown below on my computer and macbook;