Grow your CSS skills. Land your dream job.

Mobile (max-device-width) Pulling in mobile styles for desktop screen resolutions.

  • # December 14, 2012 at 2:18 pm

    Since I am only able to do the portrait mobile resolutions, is there a way to make it so that if the user switches to landscape (where there are only the screen styles) and back to portrait you don’t have to re-load the page to have the styles apply?

    # December 14, 2012 at 2:37 pm

    >I am only able to do the portrait mobile resolutions

    Why?

    Have you fixed any of the issues we highlighted and are still having trouble?

    As for the landscape/portrait switch, why don’t you want the page to reload…that’s the point?

    # December 17, 2012 at 10:44 am

    I have it set up now for portrait and landscape on the index page, but I have a problem. The dropdown javascript is still being called for the landscape version of the tablet.css, so the navigation dissapears when the user clicks on any of the links. How can I make sure that the function is not called for the landscape version of the tablet.css?

    I have the script load via an “if” statement in the header testing “userAgent” for all mobile devices with “document.write” to insert the script tag into the header.

    # December 17, 2012 at 2:44 pm

    Ok, I went back and am loading the mobile.css allways, but It still is applied to all monitor resolutions as well due to the size of (max-device-width:1280px), which is needed for the samsung galaxy note 2. How do I restrict the mobile styles to the mobile devices if they are so large?

    # December 17, 2012 at 3:19 pm

    @svoltmer, I’d recommend making your site friendly to touch/desktop when it’s that wide, but if you must have a mobile version, my guess would be to use JavaScript browser detection, since CSS3’s media queries [don't have a way to distinguish](http://www.w3.org/TR/css3-mediaqueries/ “”) otherwise AFAIK.

Viewing 5 posts - 16 through 20 (of 20 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".