11 Replies Latest reply: Aug 26, 2011 8:48 AM by c5cloudmobile RSS

    Multiscreen

    erg667 Community Member

      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

        • 1. Re: Multiscreen
          Nancy O. MVP

          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

          • 2. Re: Multiscreen
            erg667 Community Member

            Thanks for the prompt response.

             

            OK I see that if I change the code back to 'media="only screen and..." then the 3 formats work in Crome, but none of them work for the tens of millions of people using IE.

             

            Does this not work for people using IE at all?

             

            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?

             

            Thanks,

            Robert

            • 3. Re: Multiscreen
              Nancy O. MVP

              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

              • 4. Re: Multiscreen
                erg667 Community Member

                Thanks for the help Nancy,

                 

                I have no idea how to write javascript.  Where do I find this <script src="jquery.mediaqueries.js" ?

                 

                Thanks again,

                Robert

                • 5. Re: Multiscreen
                  Nancy O. MVP

                  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

                  • 6. Re: Multiscreen
                    erg667 Community Member

                    Nancy, thanks again for your assistance,

                     

                    I have to plead ignorance.  Since I don't know javascript I don't recognize what it is on any of those pages that I might need.  Could you please be more specific about the mediaquerry script?

                     

                    Thanks,

                    Robert

                    • 7. Re: Multiscreen
                      Nancy O. MVP

                      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

                      • 8. Re: Multiscreen
                        erg667 Community Member

                        Nancy,

                         

                        Thank you very much.  I finally got that to work with the info you provided in your last post.

                         

                        Robert

                        • 9. Re: Multiscreen
                          pziecina Community Member

                          Hi Nancy.

                           

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

                           

                          PZ

                          • 10. Re: Multiscreen
                            erg667 Community Member

                            PZ, thanks for the update.  I've been using IE8 and the media queries weren't working for me until I incorproated Nancy's solution.  Hopefully IE users will all migrate to IE9 soon.

                             

                            Robert

                            • 11. Re: Multiscreen
                              c5cloudmobile

                              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>