Incorrect site rendering on iPhone

[grahamrhind]

I have created two websites now with templates from Web Designer MX Premium. In both cases the site can be viewed correctly in every desktop browser plus Android and iPad browsers, but never on an iPhone. On the iPhone the left half of each page is missing - you cannot move to it or resize the page to show it - as far as the iPhone is concerned the middle of the page is the left-hand side.

Can anybody tell me what the issue may be? Many thanks in advance!

For reference, the sites are at grcdi(dot)nl and rainbowsquash(dot)com

Graham

[gwpriester]

I believe you can tap twice on the iPhone screen to resize the image down. And are you viewing the site in portrait or landscape?

Landscape mode seems to work correctly for most phones but portrait you need to tap.

The other problem I see is you have way to much content for a mobile site.

I would create a mobile version of the site with larger buttons and less content.

Make the width of your page 480 pixels wide and adjust your content to that width. Make the page deeper. The visitor will have to scroll down the page but that's OK. And make your text larger so it can be read.

(I am referring mostly to the squash site though this might help with your personal site as well).

I recently redid my home page gwpriester.com as a mobile site gwpriester.com/mobile It was a good excercise.

As website designers this gives us another source of income.

[grahamrhind]

Thanks Gary. I have no idea how iPhones work and, apparently, neither do the people who own the ones I used to test :-) I'll try that solution. (Incidentally, neither portrait or landscape worked when I tested)...

As an aside, and probably a stupid question, how do you know that somebody is coming to your site from a mobile and to redirect them to the mobile page?

[Drwyd]

Here's one way

You will need to put the code into a Head place-holder.

[grahamrhind]

Thank!

[gwpriester]

Actually you do not need a placeholder.

You can add it to the Website Properties > Page > HTML code (head) or I believe (body) sections. Though I think that it will work faster in the Head section.

[Drwyd]

Oops well spotted Gary in later versions the place-holder is not required.

[NewEra]

no i actually think a place holder is needed for both sites, try this and see if it works
<form action="demo_form.asp">
<input type="text" name="fname" placeholder="First name" /><br />
<input type="text" name="lname" placeholder="Last name" /><br />
<input type="submit" value="Submit" />
</form>

[Drwyd]

Hi NewEra

That's a different kind of place-holder

[grahamrhind]

Update: tapping doesn't seem to do anything to resolve the problem. What we have found, though, is that if one types the URL directly into the browser on the iPhone the sites are not shown correctly. But if one goes to Google, searches and then one clicks on a link to the site, the site is shown correctly. Weird!