IE JavaScript & CSS issue

Question

I cant seem to locate the issue in why everything else is working but the JS in low res. I have scanned the boards for issues related to JS and explorer. Im running ie 10 and, reduced my res on one of my screens to 800 x 600. My chrome works on both screens and ie resonds to the higher res screen, but my lower res screen is following the high res setting, like its skipping over the lower res.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"
    >
<html lang="en">
<head>
    <title></title>

    <!--[if IE]>
    <script type="text/JavaScript">
        if (screen.height <= 800) {
            document.write('<link rel="stylesheet" type="text/css" href="ie_low.css" />');
        }
        else {
            document.write('<link rel="stylesheet" type="text/css" href="ie.css" />');
        }
    </script>
    <![endif]-->

    <script type="text/JavaScript">
        var screenheight = screen.height;
        if (screenheight <= 800) {
            document.write('<link rel="stylesheet" type="text/css" href="style_low.css">');
        }
        else {
            document.write('<link rel="stylesheet" type="text/css" href="style.css">');
        }
    </script>

<style>

</style>
</head>
<body>
    <div class="container">
        <div class="header">

        </div>
        <div class="title">
            <img src='logo.png' class="logo" alt='logo'>
        </div>
        <div class="main">

        </div>
    </div>
</body>
</html>

You don't need to use Javascript for this -- this is the kind of thing that CSS Media Queries is designed to do. (IE8 doesn't support media queries, but there are ways to fix that) See caniuse.com/css-mediaqueries — SDC
– SDC, Commented Feb 28, 2013 at 17:07
IE10 doesn't support conditonal comments, hence your IE-script is never executed. — Teemu
– Teemu, Commented Feb 28, 2013 at 17:09

khollenbeck · Accepted Answer · 2013-02-28 17:31:06Z

I would suggest using media queries for high res images and different resolutions. What you need to do is create an image twice the size of what you want displayed, and then reduce it to 50% of it's original size within a high resolution media query.

HIGH RES IMAGES:

@media only screen and (-moz-min-device-pixel-ratio: 1.5),
   only screen and (-webkit-min-device-pixel-ratio: 1.5),
   only screen and (min-device-pixel-ratio: 1.5) {

    // half the size of image - assuming your image is 200 x 200
    .selector {background-size:100px 100px;} 

}

This would go inside of your existing style sheet. You could also set break points using media queries which would apply different css for different resolutions. Something like this.

BREAKPOINTS / DIFFERENT SCREEN RESOLUTIONS:

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}


/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

META TAG:

Also don't forget the meta tag.

<meta name="viewport" content="width=device-width">

LOTS OF RESOURCES:

There is a lot of information out there.

http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html http://css-tricks.com/snippets/css/retina-display-media-query/ http://mobile.smashingmagazine.com/2012/10/24/beyond-common-media-query-breakpoints/ http://www.w3.org/TR/css3-mediaqueries/ http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/ https://developer.mozilla.org/en-US/docs/CSS/Media_queries

Thanks, i didnt know about the media option. I will look into those resources!

Collectives™ on Stack Overflow

IE JavaScript & CSS issue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related