Skip navigation
erg667
Currently Being Moderated

Multiscreen

Jul 14, 2011 11:15 AM

I tried to setup 3 different css files for 3 different displays for a website but none of the styles worked.  I used the "Media Queries" screen via "Multiscreen" in Dreamweaver.  The original code read 'media="only screen and..." ' for each of the 3 styles.  When I previewed in a browser (IE) none of the syles worked.  I changed the code to 'media="screen, projection and..." ' and was able to get the style for the widest width to work when previewing in a browser (IE), but the middle (tablet) and small (phone) css did nothing.

 

Here is the code in the head of my document:

 

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">

<title>Site Title</title>

<link href="/site/css/small.css" rel="stylesheet" type="text/css" media="screen, projection and (min-width: 0px) and (max-width: 320px)" >
<link href="/site/css/medium.css" rel="stylesheet" type="text/css" media="screen, projection and (min-width: 321px) and (max-width: 768px)" >
<link href="/site/css/large.css" rel="stylesheet" type="text/css" media="screen, projection and (min-width: 769px)" >

<script src="/site/_scripts/jquery.min.js">
</script>

<!--[if lt IE 9]>
<script src="/site/_scripts/html5.js"></script>
<![endif]-->

</head>

 

What do I need to do differently to get this multiscreen option to change the display of my webpages depending on the size of the display?

 

Thanks,

Robert

 
Replies
  • Currently Being Moderated
    Jul 14, 2011 11:32 AM   in reply to erg667

    Don't use IE to test CSS Media Queries.  You need to use a standards based browser.   Current versions of Firefox, Chrome, Safari, Opera, & Apple iOS devices will support this.

     

     

    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 14, 2011 12:11 PM   in reply to erg667

    Does this not work for people using IE at all?

    Right.  IE lacks native support for many things.  Get used to it.  It's a terrible browser.

     

    If the multiscreen doesn't work for IE how to you also provide a css format that will work for IE in addition to the 3 sizes for other browsers?

     

    Use a conditional comment for IE and send it the standard width (desktop/laptop) CSS.

     

    Or you can use a Script

    http://protofunc.com/scripts/jquery/mediaqueries/

     

     

    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 14, 2011 2:11 PM   in reply to erg667

    At the bottom of that demo page, there's a link to the Project Page where you can download the script.

    http://plugins.jquery.com/project/MediaQueries

     

    View source on Demo page to see the code.

     

    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 14, 2011 3:28 PM   in reply to erg667

    jQuery Media Query Download Link

    Download (1.72 KB)

     

    Download and extract (unzip) jquery.mediaqueries.js to the Scripts folder in your Local Site.

     

    This is the relevant code to put into the top of your HTML documents.  Change default.css, wider.css and smaller.css to your own path/css files.  Adjust min-widths as required to match your own css.

     

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Your Page Title</title>
    <link rel="stylesheet" href="default.css" type="text/css" media="screen, projection">
    <link rel="stylesheet" type="text/css" href="wider.css" media="only screen and (min-width: 1100px)">
    <link rel="stylesheet" type="text/css" href="smaller.css" media="only screen and (max-width: 820px)">
    
    
            
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
           
    <script src="Scripts/jquery.mediaqueries.js" type="text/javascript"></script>
    
    </head>
    
    
    

     

     

     

    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 16, 2011 5:49 AM   in reply to Nancy O.

    Hi Nancy.

     

    Just as an update for future reference IE9 does have full support for media-queries.

     

    PZ

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 26, 2011 8:48 AM   in reply to Nancy O.

    the following code does not seem to work for me, have checked all the links and even triedd in a fresh template but no results. Am i doing something wrong

     

     

              <link rel="stylesheet" href="_styles/main.css" type="text/css" media="screen, projection">

              <link rel="stylesheet" type="text/css" href="_styles/tablet.css" media="only screen and (min-width: 1100px)">

              <link rel="stylesheet" type="text/css" href="_styles/phone.css" media="only screen and (max-width: 820px)">

     

              <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

                        

              <script src="_script/jquery.mediaqueries.js" type="text/javascript"></script>

     

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points