How to exclude iPads from mobile viewport code

Community Forums Forums Design Tips and Tricks How to exclude iPads from mobile viewport code

This topic is: not resolved

This topic contains 5 replies, has 2 voices, and was last updated by  rfmeier 10 months, 3 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #44087

    derekalvarez
    Participant
    Post count: 47

    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
    #44094

    rfmeier
    Participant
    Post count: 518

    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 – Web Developer @ Solid Interactive
    Twitter

    #44167

    derekalvarez
    Participant
    Post count: 47

    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>

    #44174

    rfmeier
    Participant
    Post count: 518

    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 – Web Developer @ Solid Interactive
    Twitter

    #44181

    derekalvarez
    Participant
    Post count: 47

    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?

    #44184

    rfmeier
    Participant
    Post count: 518

    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 – Web Developer @ Solid Interactive
    Twitter

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.