iPad screen resolution query

Given that the iPad Air 2 has a screen resolution of up to 2048px, does anyone know why a webpage set to max-width 960px would fill the screen? So far searches seem to have told me just about everything about its resolution, but that. Slightly puzzled…

Read this article. Specifically the getting started section. You can take that iphone4 example and figuratively apply this to your iPad issue.

You don’t have the max-device-width issue (example) but you still have the same issues more or less that I describe in this article.

1 Like

OK. Whilst I wouldn’t say I had my head fully round it just from reading, but I at least understand why I’m seeing what I am. A little testing might be in order to grasp things in a manner I can make use of. A job for the weekend I think…

You basically need that meta viewport tag :slight_smile: . That 2048 resolution isn’t the actual resolution you will be dealing with when you add that in.

Time to hack the header PHP file then…

Try to avoid px as a unit - Apple isn’t the only one that has introduced this wacko concept of a ‘css pixel’. Instead use view units and/or ems.

If you don’t use device-width in your media queries then you never need to worry about “CSS pixels” in general. You just design for whatever layout you have in front of you, doing whatever media queries you need. I disagree with your generalization about avoiding px - they are very useful for building a responsive layout and ultimately if you have the meta, don’t build for specific devices, and don’t do device-width in your media queries - what you see on your desktop browser (any size) will directly translate to all devices and orientation.

em’s and rems are far more powerful, and no more complicated done right - consider the following

/* 
 * In hindsight, IE 6 probably had the right idea - content-box is
 * RARELY useful for layouts and hard to work with.
 */
* { 
  box-sizing: border-box; 
}

/* 
 * Now set the master em and rem size to 10px instead of 16px
 * since that's far more intuitive.
 */
html {
  font-size: 62.5%;
}

/*
 * Now when 10px on the device promises to get *tiny* switch
 * to a view unit calculated base
 */
@media(max-width: 1000px), (max-height: 1000px) and (orientation: portrait) {
  html {
    font-size: 2vmax;
  }
}
/* And when things get real tiny */
@media(max-width: 500px), (max-height: 500px) and (orientation: portrait) {
  html {
    font-size: 4vmax:
  }
}   

If all other sizings are expressed with %, em or rem then your set - the whole page will flex according to the design. Note that relations you want maintained across the media queries will need to be % notated.

Speaking of units, I wish we had rin, rcm, rmm (real inches, real centimeters, real mm) for mobile, at least for the device width queries, that would report the true physical distance across the device’s screen so we could adjust appropriately.

Your example is invalid since if you were actually coding responsive layouts correctly, you would never design your layouts based on the orientation of the device.

Please give another example that illustrates your issue.

It depends on how you code. I set max-widths only generally in forms of percentages.That way the whole page will be fluid by itself with no media queries needed. The whole page will “flex according to the design” automatically since it’s fluid.

I only use queries for stuff like changing a 2column setup into a single column - something like that. These approaches that I take doesn’t matter whether em/rem is set at all - and in fact, since I want more precise control, I set it in px.

Ultimately this leads to almost no media queries and a fully responsive webpage. I don’t see why everyone else is setting 30 queries for simple pages. It just illustrates their poor knowledge of fluid/responsive design (not directed this to you, but in general from what I see here in these forums.)

You shouldn’t be doing device width queries!

How insulting of you.

The reason for the orientation check is to insure that if the width drops below 1000 in either dimension the switch is to be performed.

Then again, now that I think about it, if the height is under 1000 in portrait the width must be less than 1000 so it is unneccessary.

But implying that I do all my work incorrectly? Uncalled for.

You’re still not understanding. If you test your website on Chrome or something, you should be able to correctly get every display possible with a fluid layout and a few media queries. Users being in portrait mode / landscape should automatically get a good view no matter what - and you should be doing this without checking for orientation in your media queries. It’s not necessary and you’ll end up chasing the perfect design.

I never meant to imply that, so I’m sorry if you feel insulted, but if you’re not willing to learn from improper practices, then you’re no better than certain other members in the PHP forum.

You can do whatever you want - just trying to let you know what you should be doing. You’re just adding extra work for yourself. That’s all. Obviously as long as you get it responsive, that’s all that matters. You’re just making it harder on yourself.

Take what I said with however much grains of salt you want. Over and out.

Dogmatic adherence to “Never” and “Always” is shortsighted and foolish.

The media queries I set above simply determine when the screen changes to a flexible base font size. They have nothing to do with column organization or page element placement. Why? Because you are right Reese, you shouldn’t use the orientation query for layouts.

That doesn’t mean it doesn’t have other uses.

iPad in portrait & landscape:
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { /* STYLES GO HERE */}

You need to read this - http://www.sitepoint.com/media-queries-width-vs-device-width/

iPad in portrait & landscape

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { /* STYLES GO HERE */}

You too.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.