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>

Answer 1

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

IE JavaScript & CSS issue

Question

1 answers

solution1
1 2013-02-28 17:12:59

IE JavaScript & CSS issue

Question

1 answers

solution1 1 2013-02-28 17:12:59

solution1
1 2013-02-28 17:12:59