How to exclude iPads from mobile viewport code

[derekalvarez]

Website is http://cortezcolorado.net

I like how it shows up on a phone, but I want it to look the same on an iPad as it does on a desktop or laptop.

The code in my functions.php file is...

/** Add Viewport meta tag for mobile browsers */
add_action( 'genesis_meta', 'news_add_viewport_meta_tag' );
function news_add_viewport_meta_tag() {
echo '<meta name="viewport" content="width=device-width, initial-scale=1.0"/>';
}

http://cortezcolorado.net

[rfmeier]

Hello,

To start, you could comment out line 2260 to 2714.  It may take more than that, but it may be trial and error to make it look the way you want.

Let me know how it works.

---

Ryan Meier – Twitter

[derekalvarez]

My lines don't correspond with yours because I've added code to my css. Here's what I have...

<code>/* 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: 10px 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: 5px;
}

#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%;
}

}</code>

[rfmeier]

Starting with the #content element. here is the css rule while the screen width is above 960px;

/* line ~946 */
.home.news.content-sidebar #content {
	padding: 0;
	width: 650px;
}

And the css rule after the screen width gets at or below 960px;

/* line ~2549 */
.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%;
}

After the 960px rule. the #content element will become full width, forcing the sidebar below it. Removing the width: 100% for the #content element will prevent the mobile layout, but now the site overlaps the screen. This is due to the #content and #sidebar elements having a specific pixel width.

If you already understand this, then I apologize for explaining something you already may know. It will take some adjusting to get this to look clean within this range. Using percentage widths would help.

---

Ryan Meier – Twitter

[derekalvarez]

No, this mobile styling is new to me, so I appreciate it. So I suppose I'll have to figure out what width an iPad screen is and set the width to be 1 pixel lower than that?

[rfmeier]

960 should be just fine. Just in case, you may want to do some internet research on the iPad widths for media queries as they have increased resolution over the years (Portrait and Landscape).

I usually just try to develop the sites to look presentable as the screen decreases in size.

---

Ryan Meier – Twitter

[Author]

Posts