How to auto/snap fit to mobile?

[spoll]

I'm trying to figure out a way to make my site auto fit my phone or tablet. It snaps to fit automatically if I double tap the screen after my site comes up. Any ideas which code needs adjusting? I'm assuming it's in here:

/* Responsive Design
------------------------------------------------------------ */

@media only screen and (max-width: 960px) {

body,
.news-landing #inner,
#inner {
width: 100%;
margin: 0 auto;
}

.content-sidebar #inner,
.sidebar-content #inner,
.content-sidebar-sidebar #inner,
.sidebar-sidebar-content #inner,
.sidebar-content-sidebar #inner {
background: #fff;
}

#header,
#inner,
#nav {
border: none;
}

.archive-page,
.content-sidebar #content,
.content-sidebar #content-sidebar-wrap,
.content-sidebar-sidebar #content,
.content-sidebar-sidebar #content-sidebar-wrap,
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.full-width-content.news-landing #content,
.full-width-content #content,
.full-width-content #content-sidebar-wrap,
.home-middle-left,
.home-middle-right,
.home.news.content-sidebar #content,
.news-landing .wrap,
.sidebar,
.sidebar-content #content,
.sidebar-content #content-sidebar-wrap,
.sidebar-sidebar-content #content-sidebar-wrap,
.sidebar-content-sidebar #content,
.sidebar-sidebar-content #content,
#content-sidebar-wrap,
#footer,
#header,
#home-bottom,
#home-middle,
#home-top,
#sidebar-alt {
box-sizing: border-box;
width: 100%;
}

#footer .creds,
#footer .gototop,
#header ul.menu,
#header .widget-area,
#nav,
#subnav,
#title-area {
float: none;
text-align: center;
width: 100%;
}

#title-area {
padding: 10px 0 0;
}

#header .widget-area {
padding: 0px 0;
}

#header .searchform {
float: none;
padding: 0;
text-align: center;
}

#header ul.menu {
float: none;
}

#header li,
#nav li,
#subnav li {
display: inline-block;
float: none;
}

#header li li,
#nav li li,
#subnav li li {
text-align: left;
}

#nav li.right,
#subnav li.social-facebook,
#subnav li.social-rss,
#subnav li.social-twitter {
display: none;
}

.home.content-sidebar #home-bottom .featuredpost .post {
padding: 0 0 10px;
}

.entry-content img,
.featuredpage img,
.featuredpost img,
.post-image,
.ui-tabs img {
border: none;
padding: 0;
}

img.ad-left,
img.ad-right {
float: left;
margin: 5px 10px 5px 0;
}

#footer {
background: none;
padding: 15px 0 10px;
}

#footer p {
padding: 0 20px;
}

}

@media only screen and (max-width: 600px) {

#title {
font-size: 36px;
line-height: 1;
}

#nav li a,
#subnav li a {
font-size: 12px;
padding: 0px;
}

#home-top .ui-tabs ul.ui-tabs-nav {
display: none;
}

#content {
padding: 15px 20px;
}

h1,
h2,
h2 a,
h2 a:visited {
font-size: 24px;
}

h3,
h4 {
font-size: 18px;
}

.five-sixths,
.four-fifths,
.four-sixths,
.one-fifth,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fifths,
.three-fourths,
.three-sixths,
.two-fifths,
.two-fourths,
.two-sixths,
.two-thirds {
padding: 0;
width: 100%;
}

}

http://spolltest.com

[Gary Jones]

Main thing would be the viewport meta tag, but you have that already. Looks fine here in Chrome on Nexus 5.

---

WordPress Engineer, and key contributor the Genesis Framework | @GaryJ

[spoll]

Thanks for checking, maybe it's an Apple issue?

[Author]

Posts