Skip navigation
brightbelt
Currently Being Moderated

Media query is affecting tablet as well as phone

Sep 8, 2012 7:26 AM

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.

 
Replies
  • Currently Being Moderated
    Sep 8, 2012 7:56 AM   in reply to brightbelt

    Have you included the viewport meta tag in your pages?

     

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

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 8, 2012 8:47 AM   in reply to brightbelt

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 8, 2012 10:19 AM   in reply to brightbelt

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 8, 2012 10:19 AM   in reply to brightbelt

    This little tutorial should help you:

    http://www.projectseven.com/products/templates/pagepacks/adaptations/t utorials/media-queries/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

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 8, 2012 10:34 AM   in reply to Al Sparber

    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?

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 8, 2012 10:38 AM   in reply to David_Powers

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 8, 2012 11:26 AM   in reply to Al Sparber

    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.

     
    |
    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