10 Replies Latest reply: Sep 8, 2012 1:08 PM by brightbelt RSS

    Media query is affecting tablet as well as phone

    brightbelt

      HI,

      I'm on DW CS6 on an iMac intel. I am (with trepidation) using media query to style my content for a mobile phone device. The basic issue is that even though I am setting media query to have an 800px max screen (see mobile.css),the css is also affecting my ipad rendering of the site as well.

       

      Is there a way to counter this?

       

      http://www.frankbright.com/mobile.css

       

       

      To give some context, I am scaling my regular site so that it also appears ok on an ipad as is. I know this can work because I used to use fixed css containers of (780 px width) and with no media query, the ipad adjusted the size quite well on its own. And I am close to doing that here anyways through compromises etc.

       

      I am somewhat familiar with fluid grid layouts and I've even taken an online course on them, but that will take some time to set up so this is hopefully a current solution (I hope !).

       

      Also, I tried to re-style the navigation to simply use a background color on the hover (and no image) and I even set the css like this --  #navcontainer img {display:none;} This didn't seem to work for whatever reason.

       

      I appreciate any help or tips anyone could offer.

       

      Many Thanks,

      Frank B.

        • 1. Re: Media query is affecting tablet as well as phone
          David_Powers ACP

          Have you included the viewport meta tag in your pages?

           

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

          • 2. Re: Media query is affecting tablet as well as phone
            brightbelt Community Member

            Hi David,

            Thanks for responding - yes, that is on all my pages in the code. From what I understand with CS6, adding media query to a page automatically adds that code but I could be wrong. I read your article on adding that anyways, so either DW did it or I did.

             

            I am using a template and am applying the media query to my site template. Could this be affecting the media query results?

             

            Again, Thanks for your response ...

            Frank B.

            • 3. Re: Media query is affecting tablet as well as phone
              David_Powers ACP

              I'm not quite sure what you see as the problem with your site, Frank. I've just checked it on an iPad, and it looks fine.

               

              The fact that your media query is affecting the display on an iPad is fully to be expected. The width of an iPad is 768px, which is less than the max-width: 800px in your media query.

               

              If it's what happens when the iPad is in landscape orientation that concerns you, that's again to be expected. Both the iPhone and iPad regard width as being the smaller of the screen's dimensions, so the width remains 768px in either orientation, and the display zooms in or out to compensate.

              • 4. Re: Media query is affecting tablet as well as phone
                brightbelt Community Member

                Thanks David for looking at the site. You're right. I'm still getting the new media query parameters down in my head. The ipad (3) has a larger resolution (over 800 px) so I didn't expect it to be affected but I'd rather see it than not if it's happening.

                 

                I guess it's really on the iphone where I feel my css re-formatting is getting compromised. But it's coming along better over time as I get used to the new %-based designs.

                 

                Many Thanks,

                Frank B.

                • 5. Re: Media query is affecting tablet as well as phone
                  David_Powers ACP

                  brightbelt wrote:

                   

                  The ipad (3) has a larger resolution (over 800 px) so I didn't expect it to be affected but I'd rather see it than not if it's happening.

                  You're mixing up physical pixels and CSS pixels, which is understandable because it's a confusing subject.

                   

                  If browsers interpreted pixel units of measurement literally, you would need a magnifying glass to view web pages on high pixel-density screens, such as the latest versions of the iPhone and iPad. So, the W3C defines what's called a "reference pixel" (more commonly, CSS pixel) to standardize the size elements are displayed onscreen regardless of the density of physical pixels.

                   

                  In the case of the iPad, it uses four physical pixels (2 x 2) for each CSS pixel. Even though the iPad has 1536 physical pixels across the screen, as far as CSS is concerned, it's only 768px wide.

                  • 6. Re: Media query is affecting tablet as well as phone
                    Al Sparber Community Member

                    This little tutorial should help you:

                    http://www.projectseven.com/products/templates/pagepacks/adaptations/tutorials/media-queri es/index.htm

                     

                    It is entirely possible to differentiate between not only tablet and

                    phone, but also between orientation.

                     

                    --

                    Al Sparber - PVII

                    http://www.projectseven.com

                    The Finest Dreamweaver Menus | Galleries | Widgets

                    Since 1998

                    • 7. Re: Media query is affecting tablet as well as phone
                      David_Powers ACP

                      Al Sparber wrote:

                       

                      It is entirely possible to differentiate between not only tablet and

                      phone, but also between orientation.

                      In my experience, even when you use orientation in a media query for the iPad and iPhone, the page still zooms when you switch from portrait to landscape, and you have to tap the page to rescale it. However, I notice that doesn't happen with your sample page.

                       

                      Is that because you're running JavaScript to create equal height columns, or does the secret lie in the empty script immediately inside the body? Or is it because you're just supremely brilliant?

                      • 8. Re: Media query is affecting tablet as well as phone
                        Al Sparber Community Member

                        David_Powers wrote:

                        In my experience, even when you use orientation in a media query for the iPad and iPhone, the page still zooms when you switch from portrait to landscape, and you have to tap the page to rescale it. However, I notice that doesn't happen with your sample page.

                         

                        Is that because you're running JavaScript to create equal height columns, or does the secret lie in the empty script immediately inside the body? Or is it because you're just supremely brilliant?

                        No. It's because we spent 3 months researching the various articles on responsive design and managed to reinvent the technique to our standards

                         

                        The key is to use the right media queries (a combinnation of device independent and device dependent) along with exceptions for various devices and orientations. The zoom factor is equalized not through script but by use of a specific viewport meta tag. Using the tag makes pixel density irrelevant for the most part.

                        • 9. Re: Media query is affecting tablet as well as phone
                          David_Powers ACP

                          Al Sparber wrote:

                           

                          No. It's because we spent 3 months researching the various articles on responsive design and managed to reinvent the technique to our standards

                           

                          Yes, as I suspected. It's just because you're supremely brilliant.

                           

                          I see that you're using just the basic viewport meta tag. Some people get round the zoom problem with initial-scale=1, user-scalable=no, but that destroys accessibility. I must experiment more. It looks as though font-size is playing a role. Interesting.

                          • 10. Re: Media query is affecting tablet as well as phone
                            brightbelt Community Member

                            Right after I wrote that, I sort of figured that out -- I just hadn't thought of the two different modes of pixel references before. It makes sense though. Thanks.