Does initial-scale ignore a fixed viewport width?

Question

I'm optimizing a web-app to work on the iPad Portrait mode. The web-app is built as an iFrame with a width of 350px.

I use the following meta viewport tag:

<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=350" />

I expect this to behave as follows:
- The width of my visible viewport will be 350px.
- My web application is initially scaled at it's original size, which means the 350px iFrame will be fully rendered in the 350px viewport(with no white space at the borders of the visible viewport.

However, the iPad Portrait mode seems to ignore the width=350 property and renders the page as width=device-width.

Can somebody explain why this is happening and how I have to interpret this behaviour?

Does anybody know anything about this? – c_m3 Jul 31 '12 at 07:52 — c_m3, Jul 31 '12 at 07:52

score 3 · Answer 1 · edited May 23 '17 at 12:06

3

In iOS, iframes ignore all viewport settings and render as device defaults. Very annoying.

See - iOS Safari expands frameset larger than viewport

edited May 23 '17 at 12:06

Community

1
1

answered Aug 07 '12 at 13:18

tclnj

31
1

score 0 · Answer 2 · answered May 15 '15 at 09:37

In our case the viewport size on iPad was equal to the content which is first rendered. So if you have your main container spread to the whole width of the page iPad says "the viewport of that iframed page is same as the devide-width". The solution in our case was to set strict size of the iframe by using the width, height and style attributes. Then simple apply overflow: hidden on the main container.

Does initial-scale ignore a fixed viewport width?

2 Answers2