CODEWITHSUNDEEP
ioscssresponsive-designmobile-safari
Patrick Szalapski
Patrick Szalapski

Reputation: 9439

Why does a normal web page appear zoomed way out on iOS?

Why does this jsfiddle page appear so far zoomed out when viewed on Mobile Safari on iOS 6.1? I'd expect it to take up the entire width, but it zooms way out instead. I have pretty boring CSS as follows, but I'm missing something.

.foo {
    overflow: auto;
    overflow-y: hidden;
    height: 100px;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}
.foo ul li {
    display: inline-block;
    border: 1px blue solid;
    max-width: 100px;
    overflow: auto;
    white-space: normal;
}

Upvotes: 0

Views: 2840

Answers (1)

William Turrell
William Turrell

Reputation: 3326

Add

<meta name="viewport" content="initial-scale=1.0,width=device-width" />

inside the <head>

Working example (standalone)

Working example (jsfiddle)

Background: By default, mobile Safari displays pages with a canvas width of 980px (see this answer), the 'width' parameter overrides this and 'device-width' automatically sets it to whatever size (or portrait/landscape orientation) you're using. It was initially introduced by Apple but pretty much everything now supports it.

For this to work in jsFiddle, you need to add the meta tag to the CSS pane but wrap it in a </style> / <style type="text/css"> tags so it appears in the head. Also, the ordinary embed sharing link won't work, as everything is wrapped in an iframe, so you need to break out the contents of that directly: .../show/light/

(If you have a Mac, the iOS Simulator is handy for this kind of thing - requires installing XCode. Also Chrome Dev Tools > Settings (cog icon, bottom right) > Overrides > Device Metrics)

Upvotes: 2

Related Questions