CODEWITHSUNDEEP
iphonecsszoomingcrop
NallyRoll
NallyRoll

Reputation: 360

Viewing website on iPhone - Sizing Issue

I'm hoping there's a relatively simple fix for this. I've created a simple website for a client which displays as expected in all browsers. Developing a separate mobile site for the project was not part of the scope of work, but I would expect the website to display correctly on modern mobile browsers. Currently, on an iPhone 4, the left side of the 1000px-wide container is clipped (by maybe 10px), and I can't scroll left to see it at all. I'm wondering if this is a CSS issue or some kind of zoom issue? The site can be visited here.

I've had a hard time finding any resources related to the problem, but did find this snippet:

<meta name="viewport" content="width=device-width; initial-scale=0.9;">

Could this be the start of a work-around? I would be happy if the site loaded with a default zoom of, say, 75%, but I have no experience coding for mobile devices.

Upvotes: 2

Views: 4797

Answers (3)

NallyRoll
NallyRoll

Reputation: 360

So for my particular case, I have found a solution that works. Hopefully this will be helpful for others in similar situations.

The key was, in fact, in the viewport meta-tag. I'm working with a webpage whose content is restricted to a centered 1000px x 600px container. THIS article was extremely helpful in figuring this out.

As the article states, "By default, Safari on the iPhone will render your page as if it was a desktop browser on a big screen, with 980 pixels width available for the web content. Then it will scale down the content so that it fits the small screen."

In my case, with a 1000px fixed width, I was left with 20px cropped off the left, and an inability to pan over to it. The trick is to set a custom width (and height if necessary). Be sure to check the site in both vertical and horizontal iPhone orientations. There are other parameters you can use with this meta-tag, but I've kept it simple.

This is the code I included between the <head></head> tags of the site:

<meta name="viewport" content="width=1050px, height=650px" />

This gives me a 25px white border around the content of the site, and still allows zooming, etc. This is NOT a substitute for an iPhone specific website, but it ensures that users will be able to access all of the site's content.

Hope this helps!

Upvotes: 4

tallybear
tallybear

Reputation: 417

Try removing the initial scale. 

<meta name="viewport" content="width=device-width;">

Upvotes: 2

Taha Paksu
Taha Paksu

Reputation: 15616

If you want to alter some CSS for mobile view, there's a tool named adapt.js for this use. It chooses the stylesheet related to the screen resolution.

Upvotes: 1

Related Questions