Iphone Site Display Problem

HTML & CSS
1

My site is not displaying correctly on iphone5 and 4s.

The url is: http://www.mya.co.uk/nonsurgicaldev/index.html and I’ve attached my html and css.

The content does not fit the screen width when the phone is in portrait view and in both landscape and portrait view there is a large margin on the left hand side and none on the right.

I have a form on the page and had hidden the original checkboxes like this:

:root input[type=checkbox] {
position: absolute;
left: -6em;
}

and I thought it might have something to do with this, but I removed the checkbox replacement css and I still have the problem.

I have included:

<meta name=“viewport” content=“width=320” />
<script>
if (screen.width > 740) {
var mvp = document.getElementById(‘testViewport’);
mvp.setAttribute(‘content’,‘width=740’);
}
</script>

in my head tags.

Can anybody help me with this issue please? Would be much appreciated.

2

Apologies - I didn’t attach the files as they were too large but you can view the source.

3

Hi,

I don’t have an iphone to test but the first thing I would try is to remove the absolute positioning from the container as you are using left:20% and right:20% which is not really a viable centering technique especially for small devices.


#container {
	position: absolute;
    right: 20%;
	left:20%;
    width: 50%;
	min-width: 960px;
	overflow:hidden;
}

Do something like:


#container {
position:relative;
width: 50%;
min-width: 960px;
overflow:hidden;
margin:auto;
}

I don’t see that you are doing anything special for your mobile specific styles as you should be re-organising the content to fit on smaller devices to avoid scaling. Otherwise you may as well do nothing at all and let the device scale it anyway (they will assume 980px and scale accordingly).

Remember also that @media rules follow the cascade and if you say something like this:


@media only screen and (max-width: 480px) {
	body{background:red}
}
body{background:blue}

Everyone gets a blue background because the last rule over-rides what went before.

But if you say:


body{background:blue}
@media only screen and (max-width: 480px) {
	body{background:red}
}

Then only smaller devices get the red background and anything wider than 480px will be blue.